Главная » Полезные статьи » Язык PHP » Google Maps: Часть 2. Используем свои значки для меток.
Распечатать статью

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

Заменяем стандартные значки 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.

Google Maps: Часть 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>
Вот так можно внести на карту частичку своего оформления. Теперь вставляем карту со своими значками меток к себе на сайт и она великолепно вписывается в общий дизайн.
Источник:  loco.ru
Вы можете оставить комментарий, или обратную ссылку на Ваш сайт.

Оставить комментарий

Похожие статьи