Google Maps API v3.0 Saving a reference to a marker

Question

I am using Google Maps API v3.0 The map have MULTIPLE markers (so any examples of using 1 marker isnt what I am after) Things are going ok so far.. but I am not clear on how you can save a reference to a specific marker when it is clicked? (which I have read as a suggestion few places, but no examples)

There are two separate instances where I would like to have a direct target/reference back to a specific marker to control/change the behavior/image..etc (whatever).

Example of scenario #1: 1.) When I click on a marker, I am currently 'bouncing it' as well as changing its icon to a different image. If I click on a new marker.. I want to target the OLD marker to stop bouncing/revert back to old icon. I have accomplished this by running a loop over my 'marker' array and stop all animations on all markers.. and changing all icons to the old (original) image. It works.. but I would like NOT to have the overhead of running through the loop. Going forward, I would like to change the old marker to a 3rd icon image.. (to show it has been interacted with before).. so I need a way to save/set a reference to a marker once it is clicked.. so I can target it again (directly)

Example of scenario #2: 1.) I have some 'controls' (elements) outside of the map, that I would like to use to interact with the map, as well as specific markers.

ie: Have an image of the marker/entry OUTSIDE of the map.. where a user clicks on it.. and it scrolls/pans the map to that specific marker (as well as changing animation and icon image)

Here is my current click listener:

google.maps.event.addListener(addr[n], 'click', (function(marker, n) {
                    return function() {
                        infowindow.setContent(addr[n].title + "<br />" + addr[n].company + "<br />" + addr[n].workphone);
                        infowindow.open(map, addr[n]);

                        //increase z-index when marker has focus
                        addr[n].setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
}
                })(marker, n));

Q: How can I save a DIRECT reference to a marker on the map when it is clicked, to be used in another function and referenced there?

In response to MuffinMan:

Thanks... I'm still not clear though, at least as to how it relates to my project.

I -am- saving things into an array already. (addr[n] from above)

Here is the class method that is building my addr[n] array for me:

 public static function GMapMarker($markerId, $memberObject, $addressObject){
        $marker = 'var m_'.$memberObject->Id.'_'.$addressObject->AddressNum.' = new google.maps.LatLng('.$addressObject->Lat.','.$addressObject->Lon.');
                        marker = new google.maps.Marker({
                            animation: google.maps.Animation.DROP,
                            position: m_'.$memberObject->Id.'_'.$addressObject->AddressNum.',
                            title:"'.addslashes($memberObject->Full_Name).'",
                            company:"'.addslashes($memberObject->Company).'",
                            icon:"marker_gd.php?m=' . $markerId . '",
                            markerid:"'.$markerId.'",
                            id:"'.addslashes($memberObject->Id).'",
                            addressnum:"'.addslashes($addressObject->AddressNum).'",
                            refid:"m_'.$memberObject->Id.'_'.$addressObject->AddressNum.'",
                            workphone:"'.addslashes($memberObject->Work_Phone).'",
                            zIndex: '. (100 - preg_replace('/\D/','', $markerId)) .'
                        });
                        addr.push(marker);';

        return $marker;
    }

I have no way of knowing what order/index in the array that particular marker is. However I do have the unique name given and that markers lat/lon coords....

But I am NOT clear how to use it to target a marker later on?

MuffinMan MuffinMan · Accepted Answer · 2015-03-10T22:21:59

Here's what I used in my implementation:

var markers = [];

for (var index = 0; index < data.length; index++) {
    var latlng = new google.maps.LatLng(data[index].lat, data[index].lng);
    var marker = new google.maps.Marker({position: latlng, map: map, title: data[index].label, icon: 'images/dot.gif'});

    google.maps.event.addListener(marker, 'click', function() {
        markers.push(marker);  /* marker saved here for later reference*/
    });
}

markers[] is populated with the markers you want for later use. E.g. markers[0].

You can add other listeners that javascript supports to handle other events on the marker, such as dragging and hovering.

Google Maps API v3.0 Saving a reference to a marker

1 Answers