CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
Johnny Juarez
Johnny Juarez

Reputation: 248

How to move between markers on Google Map?

Does anybody know how to implement jumps between Markers after click on some anchors?

Here is my code:

<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>

and 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();

Here is my Fiddle

Upvotes: 1

Views: 691

Answers (1)

geocodezip
geocodezip

Reputation: 161334

One option: make your map variable global (so it is available in HTML "click" events):

var map;
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);

	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

Upvotes: 3

Related Questions