/
set-marker-z-index-onclick-v3.html
43 lines (43 loc) · 1.4 KB
/
set-marker-z-index-onclick-v3.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
<head>
<link href="../assets/styles.min.css" rel="stylesheet">
<title>Google Maps: Set Marker Z-Index On Click (v3)</title>
<script src="//maps.googleapis.com/maps/api/js?v=3&sensor=false&key=AIzaSyA7mayyJzzigBiPeHJ4pe8fm_gLz-mT4qU"></script>
</head>
<body>
<div id="mapdiv" style="height: 400px;"></div>
<script>
/*
* Google Maps: Set Marker Z-Index On Click (v3)
* https://salman-w.blogspot.com/2012/07/change-z-index-google-map-v3-markers.html
*/
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById("mapdiv"), {
center: new google.maps.LatLng(33.810890, -117.918772),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var that;
var infoWindow = new google.maps.InfoWindow();
var markerClick = function() {
if (that) {
that.setZIndex();
}
that = this;
this.setZIndex(google.maps.Marker.MAX_ZINDEX + 1);
infoWindow.setContent(this.getTitle());
infoWindow.open(map, this);
};
for (var i = 0; i < 10; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(map.getCenter().lat() + Math.random() * 0.4 - 0.2, map.getCenter().lng() + Math.random() * 0.4 - 0.2),
map: map,
title: "Random Marker #" + (i + 1)
});
google.maps.event.addListener(marker, "click", markerClick);
}
});
</script>
</body>
</html>