Marker schwebt auf einer Google Map

-1

Ich zeige mehrere Ereignisse als Marker auf einer Google Map.Marker schwebt auf einer Google Map

Hover auf das Ereignis ändert die Markierungsfarbe. (Siehe Bild unten).

Mehrere Ereignis kann an der gleichen Adresse.

Und das ist mein Problem, weil der Marker eines Ereignisses hinter dem letzten versteckt werden kann und es dann unmöglich ist, zu sehen, wo das Ereignis stattfindet, indem man es schwebt.

Was wäre eine Lösung, um eine Änderung der Farbe des Markers im Falle mehrerer Ereignisse an der gleichen Stelle zu sehen? Hier

ist ein funktionierendes Fiddle mit Event 3 hinter Ereignis versteckt 4: http://jsfiddle.net/5qk4zqz4/110/

Und hier ist der Code:

var geocoder; 
 
var infoWindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var name = "Event1"; 
 
    var address = "address 1"; 
 
    var point = new google.maps.LatLng(42, -72); 
 
    var html = "<b>" + name + "</b> <br/>" + address; 
 
    var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
 
    var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; 
 

 
    var i = 0; 
 
    createMarker(point,html, i, map); 
 

 
    point = new google.maps.LatLng(42.02, -72.02); 
 
    name = "Event2"; 
 
    address = "address 2"; 
 
    html = "<b>" + name + "</b> <br/>" + address; 
 
    i++; 
 
    var marker = createMarker(point,html, i, map); 
 

 
    point = new google.maps.LatLng(42.01, -72.01); 
 
    name = "Event3"; 
 
    address = "address 3"; 
 
    html = "<b>" + name + "</b> <br/>" + address; 
 
    i++; 
 
    var marker = createMarker(point,html, i, map); 
 
    map.setCenter(marker.getPosition()); 
 

 
    point = new google.maps.LatLng(42.01, -72.01); 
 
    name = "Event4"; 
 
    address = "address 3"; 
 
    html = "<b>" + name + "</b> <br/>" + address; 
 
    i++; 
 
    var marker = createMarker(point,html, i, map); 
 
    map.setCenter(marker.getPosition()); 
 
    
 

 
} 
 

 
function createMarker(point, html, i, map) { 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: point, 
 
    draggable: true 
 

 
    }); 
 
    var activeIcon, idleIcon; 
 
    
 
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
 

 
    marker.setIcon(idleIcon); 
 

 
    var elem = document.getElementById('a' + i); 
 
    if (!!elem) { 
 
    elem.onmouseover = function() { 
 
     marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png'); 
 
    } 
 
    elem.onmouseleave = function() { 
 
     marker.setIcon(idleIcon); 
 
    } 
 
    } 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 

 
    }); 
 

 
    return marker; 
 
} 
 

 

 
function hover(marker, i) { 
 
    document.getElementById('a' + i).onmouseover = function() { 
 
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png'); 
 
    } 
 
    document.getElementById('a' + i).onmouseleave = function() { 
 
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png'); 
 
    } 
 
} 
 

 
function bindInfoWindow(marker, map, infoWindow, html) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 

 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?" type="text/javascript"></script> 
 

 
<div id="a0">Event 1 address 1</div> 
 
<div id="a1">Event 2 address 2</div> 
 
<div id="a2">Event 3 address 3</div> 
 
<div id="a3">Event 4 address 3</div> 
 

 
<div id="map_canvas"></div>

Quelle

2016-03-20 michltm

Vielen Dank! – michltm

Sie können den unteren Marker sichtbar machen, indem Sie seinen zIndex über dem anderen zIndex des anderen Markers sehen.

function createMarker(point, html, i, map) { 
    var marker = new google.maps.Marker({ 
    map: map, 
    position: point, 
    zIndex: 0, 
    draggable: true 

    }); 
    var activeIcon, idleIcon; 

    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 

    marker.setIcon(idleIcon); 

    var elem = document.getElementById('a' + i); 
    if (!!elem) { 
    elem.onmouseover = function() { 
     marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png'); 
     marker.setZIndex(100); 
    } 
    elem.onmouseleave = function() { 
     marker.setIcon(idleIcon); 
     marker.setZIndex(0); 
    } 
    } 
    google.maps.event.addListener(marker, 'click', function() { 
    infoWindow.setContent(html); 
    infoWindow.open(map, marker); 

    }); 

    return marker; 
}

proof of concept fiddle

var geocoder; 
 
var infoWindow = new google.maps.InfoWindow(); 
 

 
function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var name = "Event1"; 
 
    var address = "address 1"; 
 
    var point = new google.maps.LatLng(42, -72); 
 
    var html = "<b>" + name + "</b> <br/>" + address; 
 
    var image1 = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
 
    var image2 = 'http://labs.google.com/ridefinder/images/mm_20_red.png'; 
 

 
    var i = 0; 
 
    createMarker(point, html, i, map); 
 

 
    point = new google.maps.LatLng(42.02, -72.02); 
 
    name = "Event2"; 
 
    address = "address 2"; 
 
    html = "<b>" + name + "</b> <br/>" + address; 
 
    i++; 
 
    var marker = createMarker(point, html, i, map); 
 

 
    point = new google.maps.LatLng(42.01, -72.01); 
 
    name = "Event3"; 
 
    address = "address 3"; 
 
    html = "<b>" + name + "</b> <br/>" + address; 
 
    i++; 
 
    var marker = createMarker(point, html, i, map); 
 
    map.setCenter(marker.getPosition()); 
 

 
    point = new google.maps.LatLng(42.01, -72.01); 
 
    name = "Event4"; 
 
    address = "address 3"; 
 
    html = "<b>" + name + "</b> <br/>" + address; 
 
    i++; 
 
    var marker = createMarker(point, html, i, map); 
 
    map.setCenter(marker.getPosition()); 
 

 

 
} 
 

 
function createMarker(point, html, i, map) { 
 
    var marker = new google.maps.Marker({ 
 
    map: map, 
 
    position: point, 
 
    zIndex: 0, 
 
    draggable: true 
 

 
    }); 
 
    var activeIcon, idleIcon; 
 

 
    idleIcon = 'http://labs.google.com/ridefinder/images/mm_20_blue.png'; 
 

 
    marker.setIcon(idleIcon); 
 

 
    var elem = document.getElementById('a' + i); 
 
    if (!!elem) { 
 
    elem.onmouseover = function() { 
 
     marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png'); 
 
     marker.setZIndex(100); 
 
    } 
 
    elem.onmouseleave = function() { 
 
     marker.setIcon(idleIcon); 
 
     marker.setZIndex(0); 
 
    } 
 
    } 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 

 
    }); 
 

 
    return marker; 
 
} 
 

 

 
function hover(marker, i) { 
 
    document.getElementById('a' + i).onmouseover = function() { 
 
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png'); 
 
    } 
 
    document.getElementById('a' + i).onmouseleave = function() { 
 
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_blue.png'); 
 
    } 
 
} 
 

 
function bindInfoWindow(marker, map, infoWindow, html) { 
 
    google.maps.event.addListener(marker, 'click', function() { 
 
    infoWindow.setContent(html); 
 
    infoWindow.open(map, marker); 
 

 
    }); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js?" type="text/javascript"></script> 
 

 
<div id="a0">Event 1 address 1</div> 
 
<div id="a1">Event 2 address 2</div> 
 
<div id="a2">Event 3 address 3</div> 
 
<div id="a3">Event 4 address 3</div> 
 

 
<div id="map_canvas"></div>

Quelle

2016-03-20 20:37:39 geocodezip

So wollen Sie wahrscheinlich die z einstellen -Index des markierten Markers, so dass er über dem anderen Marker erscheint. Vielleicht so etwas wie: Möglicherweise müssen

elem.onmouseover = function() { 
    marker.setIcon('http://labs.google.com/ridefinder/images/mm_20_red.png'); 
    marker.setZIndex(99); 
} 
elem.onmouseleave = function() { 
    marker.setIcon(idleIcon); 
    marker.setZIndex(1); 
}

Sie auch zunächst die zIndex Eigenschaft festgelegt, wenn Sie die Markierungen erstellen.

Quelle

2016-03-20 20:34:00 duncan

Marker schwebt auf einer Google Map

Antwort

Verwandte Themen