0

I'm a beginner to Javascript and trying to understand the works of Google Maps API v3. Found a great answer to a question here at this site, the most upvoted answer. Google Maps JS API v3 - Simple Multiple Marker Example

> <!DOCTYPE html> <html>  <head>    <meta http-equiv="content-type"
> content="text/html; charset=UTF-8" />    <title>Google Maps Multiple
> Markers</title>    <script
> src="http://maps.google.com/maps/api/js?sensor=false" 
>           type="text/javascript"></script> </head>  <body>   <div id="map" style="width: 500px; height: 400px;"></div>
> 
>   <script type="text/javascript">
>     var locations = [
>       ['Bondi Beach', -33.890542, 151.274856, 4],
>       ['Coogee Beach', -33.923036, 151.259052, 5],
>       ['Cronulla Beach', -34.028249, 151.157507, 3],
>       ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
>       ['Maroubra Beach', -33.950198, 151.259302, 1]
>     ];
> 
>     var map = new google.maps.Map(document.getElementById('map'), {
>       zoom: 10,
>       center: new google.maps.LatLng(-33.92, 151.25),
>       mapTypeId: google.maps.MapTypeId.ROADMAP
>     });
> 
>     var infowindow = new google.maps.InfoWindow();
> 
>     var marker, i;
> 
>     for (i = 0; i < locations.length; i++) {  
>       marker = new google.maps.Marker({
>         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
>         map: map
>       });
> 
>       google.maps.event.addListener(marker, 'click', (function(marker, i) {
>         return function() {
>           infowindow.setContent(locations[i][0]);
>           infowindow.open(map, marker);
>         }
>       })(marker, i));
>     }   </script> </body> </html>

This works lika a charm, but now I'm trying to implement a function that will delete specific markers. Whatever I'm trying to do make the code crash. My final try was to call a function that would delete all markers which is something like this:

    function deleteMarker(){
    for (i = 0; i < locations.length; i++) { 

        marker.setMap(null);
    }
}

which still doesn't work.

What is it that I'm missing here? All help is appreciated because I've spent hours trying to figure out this...

Community
  • 1
  • 1
Zapmore
  • 55
  • 2
  • 10

2 Answers2

2

You are overwriting the marker-object on every loop, so your function deleteMarker will only be able do remove the last marker.

Store the created markers somewhere(the locations-array would be a good place):

for (i = 0; i < locations.length; i++) {  
       locations[i][4] 
         = marker 
           = new google.maps.Marker({
         position: new google.maps.LatLng(locations[i][1], locations[i][2]),
         map: map
       });

Now you are able to access the marker-objects later:

function deleteMarker(m){
    for (i = 0; i < locations.length; i++) { 
         if(m===locations[i][3]){
          locations[i][4].setMap(null);
         } 
    }
}
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Wow! Thank you very much! This helped me to solve a problem I've been having for a time now. Knew there was something missing but couldn't get my hand on what. – Zapmore Oct 26 '12 at 14:16
0
    function initmap(result) {
        if (result.length > 0) {
            var map_options = {
                center: new google.maps.LatLng(result[0].latitude, result[0].longitude),
                zoom: zoomcount,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);

            var info_window = new google.maps.InfoWindow({
                content: 'loading'
            });

            var t = []; // --> Title
            var x = []; // --> latitude
            var y = []; // --> longitude
            var h = []; // --> HTML
            var f = "female.png";
            var m = "male.png";
            // alert(obj.value);
            // var result = getPingDetails();

            if (result.length > 0) {
                for (_count = 0; _count < result.length; _count++) {
                    t.push(result[_count].mobileuser);
                    x.push(result[_count].latitude);
                    y.push(result[_count].longitude);
                    var src = "http://www.eangelgps.com/image.ashx?id=" + result[_count].mobileuser;
                    //if (result[_count].gender == "Male") src += m;
                    //else src += f;
                    //h.push('<div style="height:120px;"><p><img src="' + src + '" /><strong>' + result[_count].firstname + " " + result[_count].lastname + '</strong><br/>' + result[_count].companyname + '(' + result[_count].designation + ')<br/>Gender:' + result[_count].gender + '<br />Mobile:' + result[_count].mobilenumber + '<br /><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details...</a><br /><br /><input type="button" value="Acknowledge" onclick="javascript:acknowledged(' + result[_count].pingId + ');" /></p></div>');
                    if (result[_count].acknowledge == "False" && result[_count].done == "False") {
                        h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
                       '<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
                       '<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
                       '<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
                       '<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
                       '<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
                       '<div style="margin-top:17px;">' +
                       '<input type="button" value="Acknowledge" class="button" onclick="javascript:acknowledged(' + result[_count].pingId + ',this);" /><input type="button" class="button" value="Done" style="display:none;" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
                       '</div></div></div>');
                    }
                    else if (result[_count].acknowledge == "True" && result[_count].done == "False") {
                        h.push('<div style="width:290px;"><div style="width:290px; height:auto;"><div style="float:left;"><img src="' + src + '" width="100" height="auto" /></div><div>' +
                       '<b style="color:#004bb2; padding:7px 0 0 10px;">' + result[_count].firstname + " " + result[_count].lastname + '</b></div><div>' +
                       '<span style="font-size:15px; color:#292727;line-height:20px;">' + result[_count].companyname + '(' + result[_count].designation + ')</span><br />' +
                       '<span style="font-size:15px; color:#292727; line-height:20px;">Gender :' + result[_count].gender + '</span><br />' +
                       '<span style="font-size:15px; color:#292727;line-height:18px;">Mobile :' + result[_count].mobilenumber + '</span><br />' +
                       '<span style="font-size:11px; color:#004bb2; font-weight:bold;"><a href="#" onclick="moreinfo(\'' + result[_count].mobileuser + '\');">More details</a></span></div>' +
                       '<div style="margin-top:17px;">' +
                       '<input type="button" value="Done" class="button" onclick="javascript:markdone(' + result[_count].pingId + ',this);" />' +
                       '</div></div></div>');
                    }
                }
                // t.push('Location Name 2');
                // x.push(33.84659);
                // y.push(-84.35686);
                // h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');

                var i = 0;
                for (item in t) {

                     m = new google.maps.Marker({
                        map: google_map,
                        animation: google.maps.Animation.DROP,
                        title: t[i],
                        position: new google.maps.LatLng(x[i], y[i]), html: h[i]
                        //position:
                    });

                    google.maps.event.addListener(m, 'click', function () {
                        info_window.setContent(this.html);
                        info_window.open(google_map, this);
                    });
                    i++;
                }
            }
            //result = null;
        }

        //else { window.document.getElementById('map_canvas').innerHTML = '<div style="vertical-align:middle;width:50%; height:50%;margin:0 auto; padding:20% 0 0 0;"> On click of iOS user name on left panel<br /> OR <br /> Check state(s) on right panel <br /> <br /> Google Map will update here accordingly.</div>'; }
    }


 var markers = [];
    function setAllMap(google_map) {
        for (var i = 0; i < markers.length; i++) {
            markers[i].setMap(google_map);
        }
    }
    function clearMarkers() {  
        //setMap(null); or
        setMap(clearMarkers);
    }
Mahadev
  • 1
  • 1