As many have noticed Google Maps API does not include a setIndex() method on the marker. You can set the z-index when adding a marker to the map. But it is not possible to change this afterwards.
I didn’t find a good solution to the problem when searching and had to resort to my own, hacking away on Google Maps. As I was feeling really good about myself when I had it working really well I just remembered that Google Maps Javascript API V3 has been released in Google
Labs… And of course there it was. The Marker class has a new method, setZIndex(zIndex:number).
Well, version 3 of the API is still only released by Google Labs which is “home to developer products that are still in their formative stages“. So for anyone not inclined to use version 3 just yet, I’ll write down how I did it here.
As I use JQuery in this particular project the example is also using JQuery. If used in production I suggest using try/catch wherever appropriate as the solution depends on a specific dom structure.
I have the below HTML which is the container for the Google map.
<div id="indexmap"></div>
The map is created as below (you’ll have to add the lat/lng variable values yourselves.
var map = new GMap2($('#indexamp'));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);
This, as most know, creates the actual map. Then it is time to add the markers. In my case I have a list of locations with the latitude/longitude in the actual html. JQuery helps me loop over these locations and dynamically add markers in the correct spots. This HTML looks like below. Note how each definition list have an id no with “mm_”
as prefix. (Never mind any objections you have on having many definition lists like this… Never mind that these coordinates are fiction…)
<dl id="mm_0">
<dt>...</dt>
<dd>
<span class="lat">61.333</span><span class="lng">31.1324</span>
Random text
</dd>
</dl>
<dl id="mm_1">
<dt>...</dt>
<dd>
<span class="lat">61.333</span><span class="lng">31.1324</span>
Random text
</dd>
</dl>
What I want is the markers to be highlighted with a different icon every time I hover over a definition list element (dl). However, both have the same coordinates and one of the markers will be hidden behind the other.
So to prepare we need to make sure the actual images in the Google generated map can be connected to these defintion list id:s. The Google map have many different layers on top of each other. One layer contain the foreground images, another the shadows, mouse map definitions and so on. Each of these layers (normal div elements) have their
own z-index.
In these different layers the images used have their own z-index. However, the z-index for the marker foreground image is the same as for the transparent clickable marker image. This makes it possible to use the transparent image z-index to restore the foreground image z-index. This is important as not to confuse the user when he later
click on a marker…
So let’s loop over these images and give them appropriate id values as well as put the markers on the map. (No - Google does not give them id’s). This is, stripped to the bare essentials, the complete code with some comments.
// Create the map
var map = new GMap2($('#indexamp'));
var point = new GLatLng(lat, lng);
map.setCenter(point, zoom);
// Loop over the definition lists picking up coordinates
var n = 0;
$('dl').each(function() {
var lat = parseFloat($('span.lat', this).text());
var lng = parseFloat($('span.lng', this).text());
var point = new GLatLng(lat, lng);
// Create the marker with custom images
var markerIcon = new GIcon(G_DEFAULT_ICON);
markerIcon.image = 'marker_default.png';
markerIcon.iconSize = new GSize(23, 30);
markerIcon.shadow = "marker_shadow.png";
markerIcon.shadowSize = new GSize(50, 30);
markerIcon.iconAnchor = new GPoint(11, 29);
markerIcon.infoWindowAnchor = new GPoint(11, 14);
var marker = new GMarker(point, {icon: markerIcon});
// Change the foreground image when hovering over a definition list
// Note that the actual id's have not been created yet.
var no = this.id.substring(3); // Exclude the prefix
$(this).hover(
function() {
marker.setImage('marker_selected.png');
// Bring this image to foreground
$('#mf_' + no)[0].style.zIndex = 1;
},
Truncated by Planet PHP, read more at the original (another 933 bytes)
