<div id="map-canvas"></div>
<ul id="markers" class="wow fadeInLeft" data-wow-delay="0.3s">
<li class="active">
<div class="marker-link map_name" data-markerid="0">Москва</div>
</li>
<li>
<div class="marker-link map_name" data-markerid="1">Барнаул</div>
</li>
<li>
<div class="marker-link map_name" data-markerid="2">Улан-Удэ</div>
</li>
</ul>
#map-canvas {
background-color: #e5e3df;
height: 100%;
min-height: 600px;
position: relative;
width: 100%;
}
.marker-link{
cursor:pointer;
margin:10px 0px;
text-decoration:underline;
}
var locations = [
['Москва, Россия', 'Москва', 'infowindow 1'],
['Барнаул, Россия', 'Барнаул', 'infowindow 2'],
['Улан-Удэ, Россия', 'Улан-Удэ', 'infowindow 3']
];
var markers = new Array();
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(55.830695, 37.431010),
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 10,
scrollwheel: false,
mapTypeControl: false,
zoomControl: true,
};
geo = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var infowindow = new google.maps.InfoWindow();
for (var i = 0; i < locations.length; i++) {
//geocodeAddress(locations[i]);
geocodeAddress(locations[i], i == 0);
}
//var isSetToCenterMap = new google.maps.LatLng(55.830695, 37.431010);
function geocodeAddress(location, isSetToCenterMap) {
geo.geocode({'address' : location[0]}, function (results,status) {
if(status == google.maps.GeocoderStatus.OK) {
if (isSetToCenterMap){
map.setCenter(results[0].geometry.location);
}
createMarker(results[0].geometry.location,location[0],location[1],location[2]);
}
});
}
var image = {
url: "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Chartreuse-icon.png",
anchor: new google.maps.Point(25, 50),
scaledSize: new google.maps.Size(50, 50)
};
function createMarker(latlng,html,label,info){
var marker = new google.maps.Marker({
position: latlng,
map: map,
draggable: false,
animation: google.maps.Animation.DROP,
icon: image,
title: html,
visible: true
});
// Register a click event listener on the marker to display the corresponding infowindow content
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(info);
infowindow.open(map, marker);
map.panTo(marker.getPosition());
}
})(marker, i));
// Add marker to markers array
markers.push(marker);
}
// Trigger a click event on each marker when the corresponding marker link is clicked
$('.marker-link').on('click', function () {
google.maps.event.trigger(markers[$(this).data('markerid')], 'click');
return false;
});
}
//initialize();
google.maps.event.addDomListener(window, 'load', initialize);
This Pen doesn't use any external CSS resources.