Thomas Thomas - 2 months ago 22
Javascript Question

Google Maps Marker Array: store only 1 marker

I'm working on a map that uses the Maps API to allow the user to click on the map and store the coordinates, then alert them to the screen. The problem is that the alert message pops up many times rather than just once like it should. The number of times the alert pops up is equal to how many markers have been added to the array, but I thought I took care of that with 'deleteMarkers()'. Here is the website: http://alainwebdesign.ca/pl2/tom/getlocation.html

And here is my javascript:

// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var marker = new google.maps.;

var custCenter = {};

function initMap() {
var haightAshbury = { lat: 49.22, lng: -122.66 };

map = new google.maps.Map(document.getElementById('map'), {
zoom: 12,
center: haightAshbury,
mapTypeId: 'terrain'
});

// This event listener will call addMarker() when the map is clicked.
map.addListener('click', function (event) {
deleteMarkers();
addMarker(event.latLng);
});

// Adds a marker at the center of the map.
addMarker(haightAshbury);
}

// Adds a marker to the map and push to the array.
function addMarker(location)
{
var marker = new google.maps.Marker({
position: location,
map: map
});

markers.push(marker);

google.maps.event.addListener(map, 'click', function (event)
{
var myLatLng = event.latLng;
window.lat = myLatLng.lat();
window.lng = myLatLng.lng();
alert(window.lat + ', ' + window.lng)
})
}
// Sets the map on all markers in the array.
function setMapOnAll(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
setMapOnAll(null);
}

// Shows any markers currently in the array.
function showMarkers() {
setMapOnAll(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
clearMarkers();
markers = [];
}

Answer

The problem is that you are adding a new click handler every time the user clicks on the map. So no matter how many markers are on the array, if the user clicks 10 times on the map, he'll have 10 alerts on the screen. Just remove the addListener() from the addMarker() function.

Also you need to declare the markers variable globally. But for this specific case you don't even need that array. A single reference to the current marker should be enough. But I'm not going to change this as I don't know how your code is gonna work in the final.

Anyway, your code should be like this:

var map = null;
var markers = [];
var custCenter = {};

function initMap()
{
    var haightAshbury = { lat: 49.22, lng: -122.66 };

    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 12,
        center: haightAshbury,
        mapTypeId: 'terrain'
    });

    // This event listener will call addMarker() when the map is clicked.
    map.addListener('click', function (event) {
        var myLatLng = event.latLng;

        deleteMarkers();
        addMarker(myLatLng);

        window.lat = myLatLng.lat();
        window.lng = myLatLng.lng();
        alert(window.lat + ', ' + window.lng);  
    });

    // Adds a marker at the center of the map.
    addMarker(haightAshbury);
}

// Adds a marker to the map and push to the array.
function addMarker(location) 
{
    var marker = new google.maps.Marker({
        position: location,
        map: map                
    });            

    markers.push(marker);
}

// Sets the map on all markers in the array.
function setMapOnAll(map) {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(map); 
    }
}

// Removes the markers from the map, but keeps them in the array.
function clearMarkers() {
    setMapOnAll(null);
}

// Shows any markers currently in the array.
function showMarkers() {
    setMapOnAll(map);
}

// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
    clearMarkers();
    markers = [];
}