позволить пользователю переместить положение маркера назад (z-index?) в пользовательской карте Google Maps
Я хотел бы позволить пользователю иметь возможность перемещать порядок пользовательских маркеров карт Google по щелчку внутри окна InfoWindow. Это для преодоления проблемы перекрывающихся маркеров. Я рассмотрел другие решения (переместить широту / долготу, кластеры маркеров, «маркеры пауков»).
Мой код имеет 2 проблемы: 1) не работает приемник jquery 2) но более важно, как реализовать изменение z-индекса (или другой техники?) И повторное отображение.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas, #side-bar {
height: 500px;
width: 600px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js" type="text/javascript"></script>
<script src="../jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
// scoping for jquery
$( document ).ready(function() {
"use strict";
// variable to hold a map
var map;
// variable to hold current active InfoWindow
var activeInfoWindow ;
// ------------------------------------------------------------------------------- //
// initialize function
// ------------------------------------------------------------------------------- //
function initialize() {
// ------------------------------------------------------------------------------- //
// LISTENER ON CLICK EVENT
// ------------------------------------------------------------------------------- //
$( "a" ).on( "click", function() {
alert("got here!");
// do something to change z-index of this marker
//...
// my_index = my_index-1;
//...
return false;
});
// map options - lots of options available here
var mapOptions = {
zoom : 5,
draggable: true,
center : new google.maps.LatLng(44.960, -93.100),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
// create map in div called map-canvas using map options defined above
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
// define two Google Map LatLng objects representing geographic points
var stPaul = new google.maps.LatLng(44.95283,-93.08925);
var minneapolis = new google.maps.LatLng(44.97984,-93.26620);
// place two markers
fnPlaceMarkers(stPaul,"St Paul");
fnPlaceMarkers(minneapolis,"Minneapolis");
}
// ------------------------------------------------------------------------------- //
// create markers on the map
// ------------------------------------------------------------------------------- //
function fnPlaceMarkers(myLocation,myCityName){
var marker = new google.maps.Marker({
position : myLocation
});
// Renders the marker on the specified map
marker.setMap(map);
// create an InfoWindow
var infoWnd = new google.maps.InfoWindow();
// add content to your InfoWindow
infoWnd.setContent('<div class="scrollFix">' + 'Welcome to ' + myCityName + '<br/><a href="#">Click</a> to move this marker to the back</div>');
// add listener on InfoWindow - close last infoWindow before opening new one
google.maps.event.addListener(marker, 'click', function() {
//Close active window if exists - [one might expect this to be default behaviour no?]
if(activeInfoWindow != null) activeInfoWindow.close();
// Open InfoWindow
infoWnd.open(map, marker);
// Store new open InfoWindow in global variable
activeInfoWindow = infoWnd;
});
}
// ------------------------------------------------------------------------------- //
// initial load
// ------------------------------------------------------------------------------- //
google.maps.event.addDomListener(window, 'load', initialize);
}); // end query
</script>
<div id="map-canvas"></div>
</body>
</html>