Синхронизация двух карт Google Maps

Автор: | 22.05.2011
4 комментария

В этой заметке я хочу показать Вам, как можно осуществить синхронизацию двух карт, используя 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>

Синхронизация двух карт Google Maps: 4 комментария

    1. admin Автор записи

      Надо попробовать, если что-то получится напишу об этом заметку.

      Ответить ↓
  3. Александр

    п.с. я думаю многим будет полезно, т.к. провинции в kosmosnimki.ru прорисованы многие, в отличие от «гигантов» карт… например мой город и город подруги прорисован только в kosmosnimki.ru

    Ответить ↓

Добавить комментарий для admin Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *