Интеграция карт с Google Maps

Пишем код для создания простой карты:

<!doctype html>

<html>

<head>

<title>Simple Map</title>

<meta name = “viewport” content=“initial-scale=1.0, user-scalable=no”>

<meta charset = “utf-8”>

<style>

html, body, #map-canvas {

height: 100%;

margin: 0px;

padding: 0px; }

</style>

<script src = “http://maps.googleapis.com/maps/api/ js?v=3.exp&sensor=false”></script>

<script>

function initialize() {

var mapOptions = {

zoom: 8,

center: new google.maps.MapTypeId.ROADMAP };

map = new google.maps.event.addDomListener (window, ‘load’, initialize);

</script>

</head>

<body>

<div id = “map-canvas”></div>

</body>

</html>

При запуске получается карта с простым функционалом (рис. 2.8).

Для представления фотографий на карте нужно добавить фотопанель.

Интеграция карт с Google Maps - student2.ru

Рис. 2.8. Карта с простым функционалом

Для этого внутри тега <style> нужно дописать:

#panel {

position: absolute;

top: 5px;

left: 50%;

margin-left: -180px;

z-index: 5px;

background-color: #fff;

padding: 5px;

border” 1px solid #999;

}

#photo-panel {

backgroud: #fff;

padding: 5px;

overflow-y: auto;

overflow-x: hidden;

width: 300px;

max-height: 300px;

font-size: 14px;

font-family: Arial;

border: 1px solid #ccc;

box-shadow: -2px 2px 2px rgba(33, 33, 33, 0.4);

display: none; }

Эта часть кода отвечает за вид представления фотографий на карте.

Заменим строку, просто подключающую карту:

<script

src=«https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false»>

</script>

на строку, которая ещё подключает библиотеку, содержащую фото:

<script src=«https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=panoramio»>

</script>.

Заменим скрипт обычной карты:

<script>

var map;

function initialize() {

var mapOptions = {

zoom: 8,

center: new google.maps.LatLng(-34.397, 150.644),

mapTypeId: google.maps.MapTypeId.ROADMAP

};

map = new google.maps.Map(document.getElementById('map-canvas'),

mapOptions);

}

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

</script>

На скрипт карты с фотопанелью:

<script>

function() {

var mapOptions = {

zoom: 16,

center: new google.maps.LatLng (47.651743,

-122.349243),

mapTypeId: google.maps.MapTypeId.ROADMAP };

var map = new google.maps.Map (document.getElementById (‘map-canvas’), mapOptions);

var panoramioLayer = new google.maps.panoramio.PanoramioLayer();

panoramioLayer.setMap(map);

var photoPanel = document.getElementById (‘photo-panel’);

map.controls [google.maps.ControlPosition. RIGHT_TOP].push(photoPanel);

google.maps.event.addListener(panoramioLayer, ‘click’, function(photo) {

var li = document.createElement(‘li’);

var link = document.createElement(‘a’);

link.innerHTML = photo.featureDetails.title + ‘: ’ + photo.featureDetails.author;

link setAttribute (‘href’, photo.featureDetails.url);

li.appendChild(link);

photoPanel.appendChild(li);

photoPanel.style.display = ‘block’ }); }

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

</script>

Скрипт должен находится внутри тега <head>. Заменяем все содержимое тега <body> на следующий код:

<body>

<ul id=«photo-panel»>

<li><strong>Photos clicked</strong></li>

</ul>

<div id=«map-canvas»></div>

</body>

В результате получим карту с фотографиями тех мест, где они были сделаны (рис. 2.9).

Интеграция карт с Google Maps - student2.ru

Рис. 2.9. Конечный вид карты

Наши рекомендации