Markers not showing on google maps

问题

I'm trying to show markers on my map. but it's not showing them.

this is the code I use:

var map;
var markers = new Array();

function initialize() {
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(27.9881, 86.9253),
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addListener(map, 'click', addMarker);
}

function addMarker(event) {
    markers.push(event.latLng);

    marker = new google.maps.Marker({
        position: event.latLng,
        map: map
    });

    console.log(markers);
}

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

the console is logging on every click an new coordinate, so the function is called, and coordinates are passed. And I can't really see any problems in the marker code.

So can anyone see the problem?

回答1:

map is a local variable, only visible inside initialize.

Use this instead of map when you set the map-property of the marker:

function addMarker(event) {
    markers.push(event.latLng);

    marker = new google.maps.Marker({
        position: event.latLng,
        map: this
    });
}

Explanation:

the callback will be executed in the scope of the object that triggers the event. Here it is the Maps-instance(because the click-listener has been applied to the map ), this will refer to this object inside the callback.

回答2:

markers.push(event.latLng);

Here you're pushing the latlng, not the marker.

markers is an array variable with global scope, whereas marker is a local variable.
In markers array you have to insert each inidividual marker and then process it.

function addMarker(event) {
    var marker = new google.maps.Marker({
        position: event.latLng,
        map: map
    });
    markers.push(marker);
}

来源：https://stackoverflow.com/questions/20679730/markers-not-showing-on-google-maps