Question

I am importing my Lat and Lon of my markers from a database. I am trying to show infoWindow with just junk content just to see if it works, I've tried everything but can't seem to make it work. any help?

var contentString;

contentString = '<div id="content">'+
  '<div id="siteNotice">'+
  '</div>'+
  '<h1 id="firstHeading" class="firstHeading">Circle K</h1>'+
  '<div id="bodyContent">'+
  '<p><b>Gas Station Type: Shell</b>'+'<br><b>Gas Prices</b>: Regular 3.08 Midgrade 3.39'+
  ' Premium '+price+' Diesel 3.35'+'<br>3289 Highland Road, Baton Rouge, LA, 70802'+
  '</p>'+
  '</div>'+
  '</div>';
  //contentString = <p><b> Gas </b></p>

  var infoWindow = new google.maps.InfoWindow(
    {
      content: 'Hello'
      //content: contentString
    });

function load() {
  var map = new google.maps.Map(document.getElementById("map-canvas"), {
    center: new google.maps.LatLng(30.418313, -91.176557),
    zoom: 13,
    mapTypeId: 'roadmap'
  });


  downloadUrl("data.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("GID");
      var address = markers[i].getAttribute("GasStationType");
      //var type = markers[i].getAttribute("type");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("Lat")),
          parseFloat(markers[i].getAttribute("Lon")));
      var html = "<b>" + name + "</b> <br/>" + address;
      //var icon = customIcons[address] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        //content: 'Hello'
        //icon: icon.icon,
        //shadow: icon.shadow
      });
      bindInfoWindow(markers, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(marker);
    infoWindow.open(map, marker);
  });
}
Était-ce utile?

La solution

bindInfoWindow(markers, map, infoWindow, html); markers is an array. bindInfowindow expects a single marker. And infoWindow.setContent expects a string, not a google.maps.Marker object. Fixed function:

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

change this:

bindInfoWindow(markers, map, infoWindow, html);

to:

bindInfoWindow(marker, map, infoWindow, html);

working fiddle

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top