Скрипт создаёт карту и выводит на ней маркеры из json, а так же создаёт меню адресов, при нажатии на ссылки на карте открывается соответствующий маркер. Как центрировать открывающийся маркер по центру карты?
Разметка
<div id="map" class="grayBox"></div><ul id="markers"></ul>
Сам скрипт
// Map
var map;
var arrMarkers = [];
var arrInfoWindows = [];
function mapInit(){
var centerCoord = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 12,
center: centerCoord,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), mapOptions);
//Определяем область отображения меток на карте
var latlngbounds = new google.maps.LatLngBounds();
//Загружаем данные в формате JSON из файла map.json
$.getJSON("http://your-webmasters.com/demo/live-motion/map.json", {}, function(data){
$.each(data.places, function(i, item){
$("#markers").append(
"<li class='row'><div class='col-xs-12 col-md-4 imgBox'><a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.image + "</a></div><div class='col-xs-12 col-md-6'><p class='title'><a href='#' rel='" + i + "' data-lat='" + item.lat + "' data-lng='" + item.lng + "'>" + item.title + "</a></p><p>" + item.description + "</p><p class='moreLink'>" + item.moreLink + "</p></div></li>"
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: map,
title: item.title
});
//Добавляем координаты меток
latlngbounds.extend(new google.maps.LatLng(item.lat, item.lng));
arrMarkers[i] = marker;
var infowindow = new google.maps.InfoWindow({
content: "<h3>"+ item.title +"</h3>"
});
arrInfoWindows[i] = infowindow;
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
});
//Центрируем и масштабируем карту так, чтобы были видны все метки
//map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
});
}
$(function(){
// Определяем карту (добавляем маркеры, балуны и список со ссылками)
mapInit();
// Cобытие клика по ссылке
$(document).on("click", "#markers a", function(){
var i = $(this).attr("rel"),
lat = $(this).data("lat"),
lng = $(this).data("lng");
// Эта строка кода, закрывает все открытые балуны, для открытия выбранного
for(close=0; close < arrInfoWindows.length; close++){ arrInfoWindows[close].close(); }
arrInfoWindows[i].open(map, arrMarkers[i]);
return false;
});
});
Json
{"places": [
{
"title": "YellowKorner",
"image": "<img src='style/img/gallery.jpg' alt=''>",
"description": "Saint-Petersburg",
"moreLink": "<a href='#' target='_blank'>more info</a>",
"lat": -56.31927,
"lng": 44.026297
},
{
"title": "Very long name of gallery",
"image": "<img src='style/img/gallery.jpg' alt=''>",
"description": "Saint-Petersburg",
"moreLink": "<a href='#' target='_blank'>more info</a>",
"lat": 56.31927,
"lng": 44.02629700001
},
{
"title": "YellowKorner",
"image": "<img src='style/img/gallery.jpg' alt=''>",
"description": "Saint-Petersburg",
"moreLink": "<a href='#' target='_blank'>more info</a>",
"lat": 10.31927,
"lng": 80.026297
}]}