0

My interactive map loads the info on the window info from the database using xml.. Do you know how can I add photos and buttons or any other features on the infowindow in this case?

here is my code

 function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(31.7031, 35.1956),
    zoom: 17,
    mapTypeId: 'roadmap'
  });

  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("map_xml.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var email = markers[i].getAttribute("email");
      var address = markers[i].getAttribute("address");
      var phone = markers[i].getAttribute("phone");
      var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));
      var html = "<b>" + name +  "</b> <br/>" + address + "</b> <br/>" + email + "</b> <br/>" + phone + "</b> <br/>";
      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon,
        shadow: icon.shadow
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

I want it to look more developed like this one

http://maps.marnoto.com/en/5wayscustomizeinfowindow/example.html + Button

but I need it still to import the info from XML connection to database like I'm doing

Nadim Alayaseh
  • 37
  • 6
  • Did you try to add an tag to your html variable? – Amaury Medeiros May 07 '15 at 21:44
  • name, address, phone, lat, long...etc all these text info are added from html form to database then xml/javascript export it .. but I want to export links/buttons/images as well.. got it? – Nadim Alayaseh May 07 '15 at 21:50
  • See [this (v2) page (with examples)](http://econym.org.uk/gmap/basic6.htm) from [Mike Williams' Google Maps Javascript API v2 tutorial](http://econym.org.uk/gmap/) – geocodezip May 07 '15 at 21:53
  • Thanks @geocodezip .. this is helpful with a photo on the infowindow what if I want to add a link or a button? – Nadim Alayaseh May 07 '15 at 22:00
  • That is just HTML. What issue are you having doing that? – geocodezip May 07 '15 at 22:01
  • the issue is that the marker infowindow imports text (name, address, phone,...etc) from database and display it on the marker. Same thing with a photo it can be imported.. but how can I import a link or a button that directs to another page? – Nadim Alayaseh May 07 '15 at 22:04
  • @geocodezip I can add the full code If that will be more helpful – Nadim Alayaseh May 07 '15 at 22:14
  • The infowindow does not import anything. It only displays some HTML fragment. All the other tasks are separate and up to you. – ThW May 07 '15 at 22:58
  • @ThW how can I make it display a button? and the button should direct to a certain page or a link ( and that link will be filled out on the database intertwined with the marker's info) – Nadim Alayaseh May 08 '15 at 07:40
  • Try using infobox instead. Read this answer: http://stackoverflow.com/questions/7616666/google-maps-api-v3-custom-styles-for-infowindow?answertab=votes#tab-top. Use Google's Infobox plugin which gives you more style properties options. – Kay_N May 08 '15 at 21:37

0 Answers0