Google Maps: Часть 2. Используем свои значки для меток.

almix — 17 ноября 2011 (обновлял 11 декабря 2011 в 22:07)
Комментарии (1) Категории: PHP, Общие вопросы | Тэги: maps Google Maps версия для печати

Заменяем стандартные значки Google Maps на свои собственные

Для того, чтобы мы могли на карте использовать маркеры со своим изображением значка, необходимо определить свой стиль.

Это можно сделать с помощью кода:

var image = new google.maps.MarkerImage('examples/lp.png',      
      new google.maps.Size(20, 32),      
      new google.maps.Point(0,0),      
      new google.maps.Point(0, 32));
 
var shadow = new google.maps.MarkerImage('examples/lp_shadow.png',      
      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
 
  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };

В начале мы определяем изображение значка метки image:

Заменяем стандартный значок на Google Maps на свой собственный

путь к файлу изображения значка метки, размер изображения, величина смещения координат точки относительно значка двумя значениями new google.maps.Point(0,0) и new google.maps.Point(0, 32))

Далее, аналагичный набор параметров для изображения тени значка (мы не стали использовать).

В параметре shape — задается в пикселях кликабельная область вокруг значка, заданная полилинией.

Для присвоения определенных параметров метки необходимо определить нужные свойства:

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,   
                icon: image,
                title: locations[i][0],
            });

Мы взяли предыдущий пример, и в его код добавили пару строк для замены стандартного значка метки на свой значок.

Посмотреть пример 2.

Вот код примера (жирным выделены добавления в пример 1):

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Пример 2. Заменяем значки Google maps на свои значки маркеров на карте - API Google Maps v3</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">

  function initialize() {
    var latlng = new google.maps.LatLng(56.323678, 44.0);
    var myOptions = {
      zoom: 15,
      center: latlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"),
        myOptions);
		
		setMarkers(map, places);
  }  
  
  var places = [
            ['Ираклион',35.333332,25.133333],
            ['Каламбака',39.704445,21.626944],
    ];    
 
    function setMarkers(map, locations) {
		//Определяем область показа маркеров
		var latlngbounds = new google.maps.LatLngBounds();	
         
        var image = new google.maps.MarkerImage('/examples/lp.png',      
		new google.maps.Size(32, 32),      
      	new google.maps.Point(0,0),      
      	new google.maps.Point(0, 32)); 
         
         
         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, 
                icon: image,  
                title: locations[i][0],
            }); 
         }
	//Центрируем и масштабируем карту
	map.setCenter( latlngbounds.getCenter(), map.fitBounds(latlngbounds));	 
    };

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:600px"></div>
</body>
</html>

Вот так можно внести на карту частичку своего оформления. Теперь вставляем карту со своими значками меток к себе на сайт и она великолепно вписывается в общий дизайн.

Источник: webmap-blog.ru/google-maps/6-poleznyx-reshenij-dlya-raboty-s-api-google-maps-v3

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.

Другие статьи по этой теме:

Комментарии (1) Подпишитесь на

RSS комментариев к этой статье.

Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

КОДИНГ

ДИЗАЙН

CMS и CMF

SEO И ПРОДВИЖЕНИЕ

ЖИЗНЬ

СОФТ

Google Maps: Часть 2. Используем свои значки для меток.

1 комментарий

Календарь

Тэги