Не удается получить маркер на карте

Question

Я пытаюсь настроить карту, но маркер не будет отображаться. Это javascript для моей карты Google.

<script src="http://maps.googleapis.com/maps/api/js?key=REMOVED"></script> 

<script> 

    google.maps.event.addDomListener(window, 'load', initialize); 

    function initialize() { 
    var pos = {lat: -33.911757, lng: 151.158454}; 

    var mapProp = { 
    mapTypeId:google.maps.MapTypeId.ROADMAP, 
    center:pos, 
    zoom:17, 
    styles: [TOO MUCH CODE HERE SO I REMOVED IT. IT'S A SNAZZY MAP] 
}; 

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); 

var markerImage = 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/bar_coktail.png'; 

var marker = new google.maps.Marker({ 
       position: pos, 
       map: googleMap, 
       title: 'Snazzy!', 
       icon: markerImage 
}); 
marker.setMap(googleMap); 

} 
</script> 

HTML-:

<div id="googleMap" style="width:600px;height:400px;"></div> 

Я не могу понять, почему маркер не будет отображаться. Что здесь происходит?

Answer 1

В своем коде вы прошли Див идентификатор 'googleMap' свойству карты маркеров. Вместо этого вы должны передать инициализированную переменную map. См. Комментарий и отредактированный код ниже.

var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); //you must use this map variable 
var marker = new google.maps.Marker({ 
        position: pos, 
        map: map, // map variable must be passed here, instead you passed googleMap 
        title: 'Snazzy!', 
        icon: markerImage 
    }); 

Answer 2

Вы используете маркер, который определен за пределами функции щелчка.

, что вам нужно смотреть на это API Карт Google, и узнать, как получить щелкнул маркер идентификатор

маркер увеличивающиеся через петлю и ВСЕГДА будет последний маркер создан

или

Ваш код не создает маркер. Вы должны добавить что-то вроде

var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(51.54968,-0.16305), 
    map: map, 
    title: "One title" 
});