We Keep Coding

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

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?

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.

How to reference a google map marker by it's id and activate it's click event using javascript?

I am dealing with Google Maps here and javascript. I have an existing marker on my Google map and I can click on it and it displays a div. If I click it again, the div disappears. I gave this marker a specific, unique id.
There is also a Polygon on the map. I want when the user clicks on the polygon that the click event is activate for a marker that I will reference by the marker's id.
Is this possible? If so, let's say that the id of the marker is U123. How would I do this?
Here is the code I use to add an event to the polygon click:
google.maps.event.addListener(assetPolygons[polygon_count],'click', function (event) {new google.maps.event.trigger('U123', 'click');});
U123 is the name of the marker id. The above is not working.

var marker = new google.maps.Marker(markerOptions);
marker.setValues({id: 1}); // v3
marker.metadata = {type: "point", id: 1}; //v2 or v3
I guess the better way to do this is to store your marker in a global var and then do
$(".something").click(function(){
new google.maps.event.trigger( marker, 'click' );
// Here marker is a global var so accessible everywhere.
});

Two seconds in google found How to trigger the onclick event of a marker on a Google Maps V3?
The only difference in the function that was stated to work, wich is:
google.maps.event.trigger(markers[i], 'click');
and yours that i can see is the new, try removing it

I built a function that loops through the assetMarkers array that stores each marker. This works:
function ClickMarker(u) {
for (i=0;i<assetMarkers.length;i++) {
if (assetMarkers[i].id == u) {
google.maps.event.trigger(assetMarkers[i], 'click');
i = assetMarkers.length;
}
}
}
In the above function, the variable u is the id of the marker in the array assetMarkers (which is the array storing the map markers). When I create the marker, I set the id using marker.setValues({id: 'U123'}); where U123 is the id of the marker.
I have to loop through the assetMarkers array to find the one I am looking for.
I was hoping, the equivalent of document.getElementById(u) would exist in Google Maps so that I would not have to loop through the array. It would be great, Google API guys, if we programmers could do something like this:
google.maps.event.trigger(google.maps.getElementById(u), 'click');
Thanks for everyone's input! It was very helpful as I am a newbie to Google Maps.

OverlappingMarkerSpiderfier show which markers are in a 'spiderfy cluster'?

I have a google map with a bunch of markers on it. Some of those markers have the same lat/lon as other markers, so sit on top of each other. I'm using the oms library to allow for the markers to be spiderfied out so each marker can be clicked.
All working great so far. However the only way you can tell if there's multiple markers is by clicking on the markers, which is a problem for my application.
Is there a way to indicate which markers are grouped into 'spiderfy' clusters?
I'm also using the MarkerClustererPlus library to handle clusters. It could be possible to use the clusterer library to provide a count and then 'on click' spiderify the markers but I couldn't figure out how to do that.
If you check this example it has spiderfy and cluster plugins mixed and working smoothly. But my problem is I am using google map API with markercluster and OverlappingMarkerSpiderfier plugin. I was also looking for if we can use leaflet cluster plugin for google map? Thank you very much.

You can use a listener to check if the marker is spiderfiable or not. If it is spiderfiable, it means that there are others elements under that pin.
google.maps.event.addListener(marker, 'spider_format', function(status) {
if(status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIED
|| status == OverlappingMarkerSpiderfier.markerStatus.UNSPIDERFIABLE)
{
marker.setIcon('Markers/marker.png');
//use a normal marker if the element is already spiderfied
//or if it can not be spiderfied
}
if(status == OverlappingMarkerSpiderfier.markerStatus.SPIDERFIABLE)
{
marker.setIcon('Markers/cluster_marker.png'); //use a different marker
}
});

Google map overlapping of markers in the same locations and not visible to user

I have trouble with my google map script where the markers on a same location overlapped and not visible to user. I tried to edit my script using OverlappingMarkerSpiderfier available in this link https://github.com/jawj/OverlappingMarkerSpiderfier. But overlapping issue exist.No improvement occured.
The below function binds a popup window with marker.I have edited the function to remove overlapping of markers in the same location using OverlappingMarkerSpiderfier.
function bindInfoWindow(marker, map, infoWindow, contentString)
{
var oms = new OverlappingMarkerSpiderfier(map);
oms.addMarker(marker);
oms.addListener(marker, 'mouseover', function() {
infoWindow.setContent(contentString);
infoWindow.open(map, marker);
$("#tabs").tabs();
});
}
// highlighting a marker
Below is the jsfiddle link of my edited google map.Please show me where iam doing wrong.
http://jsfiddle.net/7AKuX/11/

You create a new oms-instance for each marker, use the same instance for all markers instead:
http://jsfiddle.net/5VFeJ/

Google map developer api provide clustering method to see overlapped markers and its contents. Refer to this link, or else use OverlappingMarkerSpiderfier.

Centering a google map by clicking on a div

I wish to center a google map by clicking on a div within the page that is not part of the map. I tried this but it did not work
$('#myDiv').click( function() {
map.panTo(36.549362,-98.613281);
});
and i also tried this
$('#myDiv').click( function() {
map.setCenter(36.549362,-98.613281);
});

I think it should be something like:
$('#myDiv').click( function() {
map.setCenter(new GLatLng(36.549362,-98.613281));
});
ie. you have to make a LatLng object first and pass that, instead of the raw coordinates.
I don't know what version of GMaps you're using but check the documentation.
v3 Map doc, here you can see setCenter takes a LatLng.

You have to set is up as a new LatLng
var point = new google.maps.LatLng(36.549362,-98.613281);
$('#resetMapDiv').click( function(event) {
map.panTo(point);
});