Infofenster zu Google Maps hinzufügen

Question

Ich versuche, meinen Markern auf einer Google-Karte etwas InfoWindow-Inhalt hinzuzufügen. Ich kann meinen Server abfragen, Daten abrufen und die Markierungen auf die Karte setzen. Das funktioniert. Was nicht funktioniert ist, dass nichts passiert, wenn ich auf den Marker klicke. Ich würde denken, dass das Infowindow erscheinen würde. Leider ist es so lange her, dass ich Google Maps programmiert habe. Aus irgendeinem Grund wird das Klickereignis der Markierung nicht aufgerufen. Irgendwelche Vorschläge bezüglich meiner Dummheit werden geschätzt.

TIA

<script> 
    var map, geocoder; 
    var Markers = []; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: { lat: 0.0, lng: 0.0 }, 
      zoom: 12 
     }); 
     if (!Modernizr.geolocation) { 
      alert("Your browser sucks. Get a new one, maybe one that is up to date and supports GPS.") 
      return; 
     } 
     else { 
      navigator.geolocation.getCurrentPosition(show_map); 
     } 
    } 
    function show_map(position) { 
     map.setZoom(12); 
     var Latitude = position.coords.latitude; 
     var Longitude = position.coords.longitude; 
     map.setCenter({ lat: Latitude, lng: Longitude }); 
     var bounds = map.getBounds(); 
     var url = "/api/xxxxxxxxjsonendpoint"; 
     var lowerLeft = bounds.getSouthWest(); 
     var upperRight = bounds.getNorthEast(); 
     var lat0 = lowerLeft.lat(); 
     var lng0 = lowerLeft.lng(); 
     var lat1 = upperRight.lat(); 
     var lng1 = upperRight.lng(); 
     var geocoder = new google.maps.Geocoder(); 
     var data = { LowerLeftLat: lat0, LowerLeftLng: lng0, UpperRightLat: lat1, UpperRightLng: lng1 }; 
     $.get(url, data, function (result) { 
      for (var i = 0; i < result.length; i++) { 
       var address = result[i].Address1 + " " + (result[i].Address2 != null ? result[i].Address2 : "") + " " + result[i].City + " " + result[i].Province + " " + result[i].PostalCode + " " + result[i].Country; 
       var marker = new google.maps.Marker({ 
        position: geocodeAddress(geocoder, map, address), 
        map: map, 
        title: address 
       }); 
       var infowindow = new google.maps.InfoWindow({ 
        content: i 
       }); 
       makeInfoWindowEvent(map, infowindow, "test" + i, marker); 
      } 
     }); 
    } 
    function geocodeAddress(geocoder, resultsMap, address) { 
     geocoder.geocode({ 'address': address }, function (results, status) { 
      if (status === 'OK') { 
       resultsMap.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: resultsMap, 
        position: results[0].geometry.location 
       }); 
      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    } 
    function makeInfoWindowEvent(map, infowindow, contentString, marker) { 
     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(contentString); 
      infowindow.open(map, marker); 
     }); 
    } 
</script> 

---

Hier ist die jüngste Aktualisierung von meinem Code. Immer noch keine worky ........

<script> 
    var map, geocoder; 
    var Markers = []; 
    var infowindow; 
    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: { lat: 0.0, lng: 0.0 }, 
      zoom: 12 
     }); 
     infowindow = new google.maps.InfoWindow(); 
     if (!Modernizr.geolocation) { 
      alert("Your browser sucks. Get a new one, maybe one that is up to date and supports GPS.") 
      return; 
     } 
     else { 
      navigator.geolocation.getCurrentPosition(show_map); 
     } 
    } 
    function show_map(position) { 
     map.setZoom(12); 
     var Latitude = position.coords.latitude; 
     var Longitude = position.coords.longitude; 
     map.setCenter({ lat: Latitude, lng: Longitude }); 
     var bounds = map.getBounds(); 
     var url = "/api/xxxxxxx/yyyyyyyyyy"; 
     var lowerLeft = bounds.getSouthWest(); 
     var upperRight = bounds.getNorthEast(); 
     var lat0 = lowerLeft.lat(); 
     var lng0 = lowerLeft.lng(); 
     var lat1 = upperRight.lat(); 
     var lng1 = upperRight.lng(); 
     var geocoder = new google.maps.Geocoder(); 
     var data = { LowerLeftLat: lat0, LowerLeftLng: lng0, UpperRightLat: lat1, UpperRightLng: lng1 }; 
     $.get(url, data, function (result) { 
      for (var i = 0; i < result.length; i++) { 
       var address = result[i].Address1 + " " + 
        (result[i].Address2 != null ? result[i].Address2 : "") + 
        " " + result[i].City + " " + result[i].Province + " " + 
        result[i].PostalCode + " " + result[i].Country; 
       var marker = new google.maps.Marker({ 
        position: geocodeAddress(geocoder, map, address), 
        map: map, 
        title: address, 
        content: address 
       }); 

       makeInfoWindowEvent(infowindow, "test" + i, marker); 
      } 
     }); 
    } 
    function geocodeAddress(geocoder, resultsMap, address) { 
     geocoder.geocode({ 'address': address }, function (results, status) { 
      if (status === 'OK') { 
       resultsMap.setCenter(results[0].geometry.location); 
       var marker = new google.maps.Marker({ 
        map: resultsMap, 
        position: results[0].geometry.location 
       }); 
      } else { 
       alert('Geocode was not successful for the following reason: ' + status); 
      } 
     }); 
    } 
    function makeInfoWindowEvent(infowindow, contentString, marker) { 
     (function (zinfowindow, zcontentString, zmarker) { 
      zinfowindow.setContent(zcontentString); 
      google.maps.event.addListener(zmarker, 'click', function() { 
       zinfowindow.open(map, zmarker); 
      }); 
     })(infowindow, contentString, marker); 
    } 
</script> 

Answer 1

function makeInfoWindowEvent(map, infowindow, contentString, marker) { 
    infowindow.setContent(contentString); 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.open(map, marker); 
    }); 
} 

Answer 2

Ihr Code Absturz, weil, wenn der Hörer anruft, hat der Wert von und infowindow bereits geändert. Sie können so etwas wie diese (nur ändern, um die makeInfoWindowEvent Funktion) versuchen:

function makeInfoWindowEvent(map, infowindow, contentString, marker) { 
    google.maps.event.addListener(marker, 'click', function() { 
     infowindow.setContent(contentString); 
     infowindow.open(map, marker); 
     console.log (contentString); 
     console.log (marker); 
    }); 
} 

Normalerweise wird der Ausgang immer das gleiche für contentString und .

Um den realen Wert des , contentString und infowindow, erhalten Sie einen IIFE erstellen müssen passieren. Wie diese, wird der Wert der Variablen innerhalb der Funktion kopieren sein:

function makeInfoWindowEvent(map, infowindow, contentString, marker) { 
    (function (zinfowindow, zcontentString, zmarker) { 
     zinfowindow.setContent(zcontentString); 
     google.maps.event.addListener(zmarker, 'click', function() { 
     zinfowindow.open(map, zmarker); 
     }); 
    })(infowindow, contentString, marker); 
} 

jedoch Sie den Plan nicht als Parameter übergeben muß, weil der Wert der Karte immer das gleiche ist.

Sagen Sie mir, wenn Sie ein paar Fragen haben.