Как перемещаться между маркерами на Карте Google?

Question

Кто-нибудь знает, как реализовать прыжки между маркерами после щелчка на некоторых якорях?

Вот мой код:

<ul class="switching__list"> 
    <li><a href="" data-name="Black Sea">Black Sea</a></li> 
    <li><a href="" data-name="Baltik Sea">Baltik Sea</a></li> 
    <li><a href="" data-name="North Sea">North Sea</a></li> 
    <li><a href="" data-name="Atlantic Ocean">Atlantic Ocean</a></li> 
</ul> 
<div id="map-canvas"></div> 

и Javascript

function initialize() { 
    var mapOptionsWatertemp = { 
     center: new google.maps.LatLng(43.533016, 34.557850), 
     zoom: 6, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    // Coordinates 
    var blackSea = new google.maps.LatLng(43.533016, 34.557850); 
    var balticSea = new google.maps.LatLng(57.415672, 19.927596); 
    var northSea = new google.maps.LatLng(56.029392, 3.514022); 
    var atlanticOcean = new google.maps.LatLng(35.391504, -10.178066); 

    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptionsWatertemp); 

    marker = new google.maps.Marker({position: blackSea, map: map}); 
    marker2 = new google.maps.Marker({position: balticSea, map: map}); 
    marker3 = new google.maps.Marker({position: northSea, map: map}); 
    marker4 = new google.maps.Marker({position: atlanticOcean, map: map}); 
} 

initialize(); 

Вот мой Fiddle

Answer 1

Один из вариантов: сделать вашу карту переменной глобальной (так он доступен в HTML «нажми "):

var map; 
 
function initialize() { 
 
\t var mapOptionsWatertemp = { 
 
\t \t center: new google.maps.LatLng(43.533016, 34.557850), 
 
\t \t zoom: 6, 
 
\t \t mapTypeId: google.maps.MapTypeId.ROADMAP 
 
\t } 
 
    // Coordinates 
 
\t var blackSea = new google.maps.LatLng(43.533016, 34.557850); 
 
\t var balticSea = new google.maps.LatLng(57.415672, 19.927596); 
 
\t var northSea = new google.maps.LatLng(56.029392, 3.514022); 
 
\t var atlanticOcean = new google.maps.LatLng(35.391504, -10.178066); 
 

 
\t map = new google.maps.Map(document.getElementById('map-canvas'), mapOptionsWatertemp); 
 
    
 
    marker = new google.maps.Marker({position: blackSea, map: map}); 
 
    marker2 = new google.maps.Marker({position: balticSea, map: map}); 
 
    marker3 = new google.maps.Marker({position: northSea, map: map}); 
 
    marker4 = new google.maps.Marker({position: atlanticOcean, map: map}); 
 
} 
 

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

#map-canvas 
 
{ 
 
height: 400px; 
 
width: 500px; 
 
}

<script src="http://maps.googleapis.com/maps/api/js"></script> 
 
<ul class="switching__list"> 
 
    <li><a href="javascript:map.setCenter(marker.getPosition());" data-name="Black Sea">Black Sea</a></li> 
 
    <li><a href="javascript:map.setCenter(marker2.getPosition());" data-name="Baltik Sea">Baltik Sea</a></li> 
 
    <li><a href="javascript:map.setCenter(marker3.getPosition());" data-name="North Sea">North Sea</a></li> 
 
    <li><a href="javascript:map.setCenter(marker4.getPosition());" data-name="Atlantic Ocean">Atlantic Ocean</a></li> 
 
</ul> 
 
<div id="map-canvas"></div> 
 
       

proof of concept fiddle