Сообщений в теме: 3

[badisoft]

Понадобилось тут мне. Сваял. Выкладываю в общий доступ. Кому-то будет полезно, а кто-то и дополнительных фишек придумает, которые я (возможно) допишу. Тут можно посмотреть как оно выглядит.

Координаты (google.maps.LatLng) надо будет сменить на свои. Информационный блок (infowindow.setContent) тоже.
Масштаб (zoom) по вкусу.

инсталляция: сохранить нижеследующий текст в файл core/tpl/user/[шаблон]/blocks/mymap.tpl.html и подключить его в админке в разделе "Управление блоками" как "подключить блок из файла". Задать, где он будет показываться. В вышеуказанном примере задано показывать "только на выбранных", "Выбранные страницы"="Дополнительные страницы", "Выбранные дополнительные страницы"="О магазине", "Расположение"="Сверху"

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ru"></script>
<script type="text/javascript">
{literal}
  function initialize() {
	var myOptions = {
	  center: new google.maps.LatLng(59.986656,30.348025),
	  zoom: 17,
	  streetViewControl: false,
	  mapTypeId: google.maps.MapTypeId.ROADMAP,
	  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
	var marker = new google.maps.Marker({map: map, position: map.getCenter()});
	var infowindow = new google.maps.InfoWindow();
	infowindow.setContent('<b>Rena-Service</b><br>Заправка картриджей');
	google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, marker);});
  }
  google.maps.event.addDomListener(window, 'load', initialize);
{/literal}
</script>
<div id="map_canvas" style="width:100%; height:400px;"></div>

PS. Если нужна карта не на русском языке, то замените &language=ru на соответствующий язык.

[badisoft]

Чуть переделал. Добавил линию пути от ближайшего метро до моей лавки. Надеюсь, что менять и как вообще получить координаты "пути" достаточно очевидно.

<script type="text/javascript" src="http://maps.google.c...alse"></script>

<script type="text/javascript">

{literal}

  function initialize() {

    var myOptions = {

	  center: new google.maps.LatLng(59.985859,30.345598),

	  zoom: 17,

	  streetViewControl: false,

	  mapTypeId: google.maps.MapTypeId.ROADMAP,

	  navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}

    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker({map: map, position: new google.maps.LatLng(59.986656,30.348025)});

    var infowindow = new google.maps.InfoWindow();

    infowindow.setContent('<b>Rena-Service</b><br>Заправка картриджей');

    google.maps.event.addListener(marker, 'click', function() {infowindow.open(map, marker);});

    var pathCoord = [

	    new google.maps.LatLng(59.98512,30.34421),

	    new google.maps.LatLng(59.98528,30.34584),

	    new google.maps.LatLng(59.98556,30.34574),

	    new google.maps.LatLng(59.98581,30.34827),

	    new google.maps.LatLng(59.986656,30.348025)];

    var pathLine = new google.maps.Polyline({path: pathCoord, strokeColor: "#FF0000", strokeOpacity: 1.0, strokeWeight: 4});

    pathLine.setMap(map);

  }

  google.maps.event.addDomListener(window, 'load', initialize);

{/literal}

</script>

<div id="map_canvas" style="width:100%; height:500px;"></div>

Ежели кто будет говорить, что decodePath() оптимальнее, то я весь из себя Капитан-Внимание. Ибо мне за целый день так и не удалось добиться декодирования ужатого набора координат пути с помощью этой функции и я плюнул. Таки пять точек не стоят потери дня.
Так и не смог я получить массив данных с координатами из кодированной строки и вписал не кодированный массив. Ежели кто сталкивался и знает синтаксис - буду благодарен за помощь.

[badisoft]

Ежели кто будет говорить, что decodePath() оптимальнее, то я весь из себя Капитан-Внимание. Ибо мне за целый день так и не удалось добиться декодирования ужатого набора координат пути с помощью этой функции и я плюнул

Тьфу ты, блин.. Надо было всего-то библиотеку добавить - эта функция в отдельной библиотеке geometry.
Вот так - maps.google.com/maps/api/js?libraries=geometry&sensor=false

[ale-x]

Решил развить хорошую идею. Перерыл кучу сайтов (многое позаимствовал) и сделал как хотелось.
Карта с несколькими маркерами, и всплывающими окнами по нажатию на маркер.

Особенности:

• При нажатии на другой маркер текущее окно закрывается.
• Карта сама центрируется так чтобы все маркеры поместились.
• Можно использовать произвольные иконки для маркеров.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=ru"></script>
<script type="text/javascript">
{literal}

google.maps.event.addDomListener(window, 'load', function() {
	var markers = [];

	var latlng = new google.maps.LatLng(56.323678, 44.0);
	var myOptions = {
	  zoom: 13,
	  center: latlng,
	  mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	var map = new google.maps.Map(document.getElementById("map_canvas"),
		myOptions);
  
   var infoWindow = new google.maps.InfoWindow;

	var onMarkerClick = function() {
	  var marker = this;
	  var latLng = marker.getPosition();
	  infoWindow.setContent(marker.title);
	  infoWindow.open(map, marker);
	};

  var places = [

			['Кинотеатр КАРО ФИЛЬМ в ТЦ Шоколад',56.31927,44.026297],
			['Кинотеатр Мир',56.241259,43.859471],
			['Кинотеатр Октябрь',56.317213,43.993976],
			['Кинотеатр Орленок',56.318596,43.996303],
			['Кинотеатр Россия',56.286148,43.93104],
			['Кинотеатр Синема Парк',56.308056,44.073827],
			['Кинотеатр Сормовский',56.347345,43.871158],

	];  

	google.maps.event.addListener(map, 'click', function() {
	  infoWindow.close();
	});
	function setMarkers(map, locations) {
  //Определяем область показа маркеров
  var latlngbounds = new google.maps.LatLngBounds();
		 for (var i = 0; i < places.length; i++) {
			var myLatLng = new google.maps.LatLng(locations[i][1], locations[i][2]);
   //Добавляем координаты маркера в область
   latlngbounds.extend(myLatLng);
			var marker = new google.maps.Marker({
				position: myLatLng,
				map: map,  
				title: locations[i][0],
	 icon: 'http://google-maps-icons.googlecode.com/files/cinema.png'
			});
markers.push(marker);
		 }
//Центрируем и масштабируем карту
map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));
	};

	setMarkers(map, places);
for (var i = 0; i < places.length; i++) { google.maps.event.addListener(markers[i], 'click', onMarkerClick);}

});
{/literal}
</script>
<div id="map_canvas" style="width:100%; height:400px;"></div>

P.S. Буду рад если кто плюсанет