Marker hinzufügen und Onclick-Funktion zu zeigen, Infofenster

Question

Ich weiß, das ist einfach, aber es ist wirklich schwer, diese

<script type="text/javascript"> 
    var map; 
    var infowindow = new google.maps.InfoWindow({ 
     size: new google.maps.Size(150, 50) 
    }); 
    var marker; 

    function createMarker(latlng, html) { 
     var contentString = html; 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map 
     }); 

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

    function initMap() { 
     map = new google.maps.Map(document.getElementById('map'), { 
      center: {lat: 1.4683625, lng: 124.8308826}, 
      zoom: 15 
     }); 
     var infoWindow = new google.maps.InfoWindow({map: map}); 

// Try HTML5 geolocation. 
     if (navigator.geolocation) { 
      navigator.geolocation.getCurrentPosition(function (position) { 
       var pos = { 
        lat: position.coords.latitude, 
        lng: position.coords.longitude 
       }; 

       map.setCenter(pos); 

       createMarker(map.getCenter(), "The marker is here"); 

      }, function() { 
       handleLocationError(true, infoWindow, map.getCenter()); 
      }); 
     } else { 
// Browser doesn't support Geolocation 
      handleLocationError(false, infoWindow, map.getCenter()); 
     } 
    } 

    function handleLocationError(browserHasGeolocation, infoWindow, pos) { 
     infoWindow.setPosition(pos); 
     infoWindow.setContent(browserHasGeolocation ? 
       'Error: The Geolocation service failed.' : 
       'Error: Your browser doesn\'t support geolocation.'); 
    } 
    google.maps.event.addDomListener(window, 'load', initMap); 
</script> 

für mich

ich versuche, es zu verbinden Bisher hinzuzufügen mit diesem Code:

var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150,50) 
}); 

function createMarker(latlng, html) { 
    var contentString = html; 
    var marker = new google.maps.Marker({ 
     position: latlng, 
     map: map, 
     zIndex: Math.round(latlng.lat()*-100000)<<5 
    }); 

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

Aber ich kann das nicht funktionieren, es zeigt nur ein Bild ohne Infofenster oder so. Wie füge ich Marker hinzu und zeige Infowindow nur wenn ich auf den Marker klicke?

Answer 1

Ihr map Variable ist lokal auf die initMap Funktion, so dass nicht zugänglich innerhalb der createMarker Funktion ist.

Code-Schnipsel:

// global map variable 
 
var map; 
 
var infowindow = new google.maps.InfoWindow({ 
 
    size: new google.maps.Size(150, 50) 
 
}); 
 

 
function createMarker(latlng, html) { 
 
    var contentString = html; 
 
    var marker = new google.maps.Marker({ 
 
    position: latlng, 
 
    map: map 
 
    }); 
 

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

 
function initMap(response) { 
 
    // initialize the global version of the map variable, don't create a new one local to this function 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: 1.4683625, 
 
     lng: 124.8308826 
 
    }, 
 
    zoom: 15 
 
    }); 
 
    createMarker(map.getCenter(), "The marker is here"); 
 
} 
 
google.maps.event.addDomListener(window, "load", initMap);

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

Answer 2

Im Skript ist ein Fehler aufgetreten. Sie müssen latlng.lat() durch latlng.lat ersetzen.

Ein weiterer Fehler, den ich mir vorstellen kann, ist map Variable ist lokal, so dass es nicht in createMarker verwendet werden kann. Sie müssen es in den globalen Bereich verschieben.

var map = null; 
function initMap(response) { 
    map = new google.maps.Map(document.getElementById('map'), { 
     center: {lat: 1.4683625, lng: 124.8308826}, 
     zoom: 15 
    }); 
    ... 
}