В этой заметке я хочу показать Вам, как можно осуществить синхронизацию двух карт, используя API Google Maps v3.
В начале мы создаем одну карту с элементами управления.
Пишем следующий код:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="title" content="Синхронизация двух карт Google Maps" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var options = {
zoom: 12,
center: new google.maps.LatLng(56.316537,43.998779),
scrollwheel: false,
scaleControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
}
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), options);
map1.setMapTypeId(google.maps.MapTypeId.ROADMAP);
}
</script>
<style type="text/css">
#map_canvas1{width: 500px; height: 400px;}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas1" ></div>
</body>
</html> |
В этом коде мы задаем параметры карты map1: начальный уровень масштаба 12, координаты центра карты, отменяем возможность изменения уровня масштаба колесиком прокрутки мыши, размещаем на карте стандартный элемент управления масштабом, а также переключатель типа карты в виде выпадающего списка.
Область для карты map_canvas1.
Добавляем вторую карту — map2, с теми же параметрами, но тип карты устанавливаем SATELLITE — спутник.
Область для карты map_canvas2
Для осуществления синхронизации карт при изменении масштаба или панорамировании, необходимо добавить еще две строчки
map1.bindTo('center', map2, 'center');
map1.bindTo('zoom', map2, 'zoom'); |
Окончательный код примера:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="title" content="Синхронизация двух карт Google Maps" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var options = {
zoom: 12,
center: new google.maps.LatLng(56.316537,43.998779),
scrollwheel: false,
scaleControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
}
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), options);
map1.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), options);
map2.setMapTypeId(google.maps.MapTypeId.SATELLITE);
map1.bindTo('center', map2, 'center');
map1.bindTo('zoom', map2, 'zoom');
}
</script>
<style type="text/css">
#map_canvas1{width: 500px; height: 400px;}
#map_canvas2{width: 500px; height: 400px;}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas1" ></div>
<br />
<div id="map_canvas2" ></div>
</body>
</html> |
Мы также можем синхронизировать карту Google Maps с картой OpenStreetMap, отображаемой с помощью API Google Maps v3.
Смотрите код в заметке «Знакомство с проектом OpenStreetMap».
Отличие от кода первого примера, синхронизации двух карт Google Maps, это определение нового типа карты osm.
Код примера для синхронизации Google Maps с картой OpenStreetMap:
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<meta name="title" content="Синхронизация двух карт Google Maps и OpenStreetMap" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var options = {
zoom: 12,
center: new google.maps.LatLng(56.316537,43.998779),
scrollwheel: false,
scaleControl: true,
mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}
}
var map1 = new google.maps.Map(document.getElementById("map_canvas1"), options);
map1.setMapTypeId(google.maps.MapTypeId.ROADMAP);
var map2 = new google.maps.Map(document.getElementById("map_canvas2"), options);
map2.setMapTypeId(google.maps.MapTypeId.SATELLITE);
// Задаем слой с OSM
var openStreet = new google.maps.ImageMapType({
getTileUrl: function(ll, z) {
var X = ll.x % (1 << z); // wrap
return "http://tile.openstreetmap.org/" + z + "/" + X + "/" + ll.y + ".png";
},
tileSize: new google.maps.Size(256, 256),
isPng: true,
maxZoom: 18,
name: "OSM",
alt: "Слой с OpenStreetmap"
});
//Добавляем слои к карте
map2.mapTypes.set('osm', openStreet);
map2.setMapTypeId('osm');
map2.setOptions({
mapTypeControlOptions: {
mapTypeIds: [
'osm',
google.maps.MapTypeId.ROADMAP,
google.maps.MapTypeId.TERRAIN,
google.maps.MapTypeId.SATELLITE,
google.maps.MapTypeId.HYBRID
],
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
});
map1.bindTo('center', map2, 'center');
map1.bindTo('zoom', map2, 'zoom');
}
</script>
<style type="text/css">
#map_canvas1{width: 500px; height: 400px;}
#map_canvas2{width: 500px; height: 400px;}
</style>
</head>
<body onload="initialize()">
<div id="map_canvas1" ></div>
<BR />
<div id="map_canvas2" ></div>
</body>
</html> |
Добрый день! А Есть ли возможность подключения карт kosmosnimki.ru в компонент adsmanager?
Надо попробовать, если что-то получится напишу об этом заметку.
Спасибо! Буду надеяться что получится!
п.с. я думаю многим будет полезно, т.к. провинции в kosmosnimki.ru прорисованы многие, в отличие от «гигантов» карт… например мой город и город подруги прорисован только в kosmosnimki.ru