We Keep Coding

Trigger click event on markers and marker clusters with Google Maps

Everything works fine with InfoWindow on markers and marker clusters, except all markers and marker clusters can't trigger when page load.
This is my code so far. (See my JSFiddle)
How do I trigger a click event on all markers and marker clusters by default?
I added google.maps.event.trigger(marker, 'click') but it didn't work.
What do I need to change in the initialize function to make this work?

e.g. https://jsfiddle.net/jacobgoh101/7Lg1q5fL/7/
The problem is that there is only one infoWindow variable. Whenever you click the marker, it overwrite the previous infoWindow. So there can only be 1 infoWindow at a time.
Therefore, you gotta create multiple infoWindow variable, and set them immediately after you init the markers, not after click.
for (i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
var newInfoWindow = new google.maps.InfoWindow();
newInfoWindow.setContent("<a target=\'_blank\' href=\'" + marker.getTitle() + "\'>" + marker.getTitle() + "</a><br />" + marker.content + "kWh");
newInfoWindow.open(gm_map, marker);
infoWindowArray.push(newInfoWindow);
// ...........
}
(Your code is a bit messy so I only edit the necessary part to give you the idea. Hope this is enough for you to build on top of.)

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.

Animate a particular marker

I insert markers from an array by using a loop and I also include button which zooms to a particular marker. So far so good.
JSFiddle
Now I'd like to animate the marker which I zoom to for 3 seconds. I know I should use the function
marker.setAnimation(google.maps.Animation.BOUNCE);
but I can't figure out how to bind the action to a particular marker. Any help appreciated.

You should keep a reference to the marker objects you create.
var marker_refs = [];
function initialize() {
...
for(...) {
marker_refs[i] = new google.maps.Marker(...);
...
}
I updated your fiddle: http://jsfiddle.net/na9Ha/2/

How do I link Google Maps Markers to other elements?

Using the google maps (and JavaScript) I have been able to easily display several markers which each have a nice little info window over them.
//Create map over USA
map = new google.maps.Map2( document.getElementById('map') );
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3);
//Create point, then marker, and then add to map
function create_marker(lat, lng, html) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
}
var html = '<div>this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html);
However, I now want to be able to link the "click" of markers to functions which can update other parts of the page as well. For example, I would like to have a sidebar with copies of the marker infowindow content. The same way google maps shows results on the left and markers on the right. I might even want the click of sidebar content to open a given marker infowindow on the map.
The problem is that the GMarker click event only passes the lat/long - and I'm not sure how I can use that to find the matching div or whatever.
How do I get a unique id/handle for each marker?

Assign an id to each marker and its corresponding element in the sidebar. Create an event listener to call that id. Something like this:
var html = '<div>this is my text</div>';
var sideHtml = '<div id="1">this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html, 1);
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery)
//Create point, then marker, and then add to map
function create_marker(lat, lng, html, id) {
var marker = new GMarker( new GLatLng(lat,lng));
marker.bindInfoWindow(html);
map.addOverlay(marker);
GEvent.addListener(marker, 'click', function(latlng) {
var div = document.getElementById(id); //access the sidebar element
// etc...
});
}
See also this question.

For those interested there is a great example of linking dom elements with markers given here. Basically you just create a global JS array that holds a reference to each marker object.