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:
путь к файлу изображения значка метки, размер изображения, величина смещения координат точки относительно значка двумя значениями 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],
});Мы взяли предыдущий пример, и в его код добавили пару строк для замены стандартного значка метки на свой значок.
Вот код примера (жирным выделены добавления в пример 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>Вот так можно внести на карту частичку своего оформления. Теперь вставляем карту со своими значками меток к себе на сайт и она великолепно вписывается в общий дизайн. 
1 комментарий
Leave a Comment