Гугл карта для сайта - Google Maps API

Как самостоятельно без дополнительных расширений внедрить на сайте гугл-карту с меткой маркером и описанием в сплывающей подсказке, появляющейся при клике по маркеру.

Работа с API гугл карт.

Карта гугл на сайт

Вставить гугл карту на сайт по сложности так же как и вставить счётчик для сайта.

Для этого нужно:

  • Включить API с названием Google Maps JavaScript API
  • Взять готовый шаблон кода и вставить в него свои координаты и ключ API
  • Вставить код в нужном месте на сайте.

Да, Google Maps работают на языке JavaScript. Но чтобы вставить простую карту на сайт не нужно знать JavaScript, но нужно хоть немного понимать разметку HTML.

Я не буду ставить куски простых примеров кода для вставки карты. Вы их можете найти в документации Google Maps, где есть множество решений и примеров простейшего кода с объяснениями.

Документация - https://developers.google.com/maps/documentation

Вот хочу поставить обучающее видео по работе с API гугл карт.

В видео очень хорошо показано как работать с API гугл карт и реализован пример как создать гугл-карту для группы адресов (меток).

Я надеюсь что вы поймёте и оцените видео.

Ссылки на сервисы и документацию из видео:

Консоль разработчика Google API - https://console.developers.google.com/apis/dashboard

Документация Google Maps JavaScript API - developers.google.com/maps/documentation/javascript/tutorial

Код:

<style>
	#map {width:100%; height:600px;}
</style>

<div id="map"></div>

<script>
	function initMap() {
		var element = document.getElementById('map');
		var options = {
			zoom: 5,
			center: {lat: 55.7558, lng: 37.6173},
		};

		var myMap = new google.maps.Map(element, options);

		var markers = [
			{
				coordinates: {lat: 55.751956, lng: 37.622634},
				info: '<h3>Москва</h3><br><img src="https://placehold.it/200x150"><br><p>Описание</p>'
			},
			{
				coordinates: {lat: 59.940208, lng: 30.328092},
				info: '<h3>Санкт-Петербург</h3><br> <img src="https://placehold.it/200x150"><br><p>Описание</p>'
			},
			{
				coordinates: {lat: 50.449973, lng: 30.524911},
				info: '<h3>Киев</h3><br><img src="https://placehold.it/200x150"><br><p>Описание</p>'
			}
		];

		for(var i = 0; i < markers.length; i++) {
			addMarker(markers[i]);
		}

		function addMarker(properties) {
			var marker = new google.maps.Marker({
				position: properties.coordinates,
				map: myMap
			});

			if(properties.image) {
				marker.setIcon(properties.image);
			}

			if(properties.info) {
				var InfoWindow = new google.maps.InfoWindow({
					content: properties.info
				});

				marker.addListener('click', function(){
					InfoWindow.open(myMap, marker);
				});
			}
		}
	}
</script>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

Данный код - это готовый рабочий исходник для карты с несколькими метками. Остаётся только включить API, заменить для markers координаты и содержимое всплывающей инфо-подсказки, если нужно - по шаблону добавить новых, а так же прописать свой ключ в самом низу кода вместо YOUR_API_KEY

Параметры в картах

Масштаб для zoom:

  • 1 - мир
  • 5 - континент
  • 10 - Город
  • 15 - Улицы
  • 20 - Здания

Панорама улицы

Так же мы можем использовать панораму улицы, при условии что она есть для местоположения.

Панорама создаётся для карты с одной координатой. Для панорам нужно включить API с названием - Google Street View Image API

Ссылки:

Панорама улицы: https://developers.google.com/maps/documentation/javascript/examples/streetview-embed?hl=ru

Демо и код панорамы можно увидеть чуть ниже в "гибридной" карте.

Соединяем карту и панораму - гибрид

Мой любимый приём - это гибридная карта состоящая из трёх слоёв:

  1. карта с меткой;
  2. панорама;
  3. кнопка переключения между картой и панорамой.

Подходит он только для одинарной метки. Конечно это только если для координат есть панорама.

Смысл гибрида в том, что всё это всунуто в один див и через CSS свойство z-index распределено по слоям. Кнопка переключатель через JavaScript переключает с карты на панораму и обратно.

Внешне выглядит это так:

 
 

Для удобства код я разделил на составные части.

HTML

<div id="company-map">
	<div class="btnMap">
		<button id="btnPanel">Показать панораму улицы</button>
	</div>
	<div id="map"></div>
	<div id="pano"></div>
</div>

 

CSS

#company-map {
	position: relative;
	border: solid 1px #ccc;
	width: 100%;
	height: 450px;
	overflow: hidden;
}
#map {
	position: absolute;
	width: 100%;
	height:600px;
	border:solid 1px #ccc;
	z-index: 1;
}
#pano {
	position: absolute;
	width: 100%;
	height: 600px;
	z-index: 0;
}
.btnMap {
 	position: absolute;
 	margin-top: 10px;
 	left: 50%;
 	margin-left: -75px;
 	background-color: rgba(0, 0, 0, 0.5);
 	border: 1px solid #999;
 	text-align: center;
 	line-height: 25px;
 	padding: 5px;
 	z-index: 5;
 	cursor: pointer;
}
#btnPanel {
	width:150px;
}

 

JavaScript - части кода отмечены комментариями

<script>
	//Кнопка переключение на панораму
	document.getElementById('btnPanel').onclick = function() {
		var map = document.getElementById('map'),
			zInd = getComputedStyle(map).zIndex;
		if(zInd == 1) {
			map.style.zIndex = -1;
			this.innerHTML = 'Показать карту';
		} else {
			map.style.zIndex = 1;
			this.innerHTML = 'Показать панораму улицы';
		}
	}
	//Конец кнопки переключения

	function initMap() {
		var element = document.getElementById('map');
		var options = {
			zoom: 12,
			center: {lat: 55.7566599, lng: 37.6148147},
		};
		var myMap = new google.maps.Map(element, options);

		var marker = new google.maps.Marker({
			position: {lat: 55.7566599, lng: 37.6148147},
			map: myMap
		});
		var InfoWindow = new google.maps.InfoWindow({
			content: '<h3>Москва</h3><img src="img/moskow.jpg"><p>Москва - столица Российской Федерации</p>'
		});
		marker.addListener('click', function(){
			InfoWindow.open(myMap, marker);
		});

		// Панорама
		var panorama = new google.maps.StreetViewPanorama(
			document.getElementById('pano'), {
				position: {lat: 55.7566599, lng: 37.6148147},
				pov: {heading: 34, pitch: 10}
			});
		map.setStreetView(panorama);
		// Конец панорамы
	}
</script>

<script async defer
	src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>

Статическое изображение карты

Чтобы использовать статические изображения карты, нужно включить API с названием Google Static Maps API

Чтобы вставить карту в формате статического изображения, нужно в HTML вставить как обычно вставить тег img, в котором прописать путь с атрибутами для карты:

<img src="https://maps.googleapis.com/maps/api/staticmap?center=Великий+Новгород&zoom=13&size=600x300&maptype=roadmap%20&markers=color:red%7Clabel:C%7C40.718217,-73.998284%20&key=YOUR_API_KEY" />

В коде нужно вставить API-ключ и заменить название и координаты.

Так же можно установить размеры изображения и цвет маркера.

Обратите внимание, что в названиях городов состоящих из двух и более слов вместо пробелов используется знак +

Документация - https://developers.google.com/maps/documentation/static-maps/intro

MySQL и PHP

О том как использовать гугл карты для работы с базой данных и php читайте в соответствующей документации - https://developers.google.com/maps/documentation/javascript/mysql-to-maps

Гео-кодирование

Руководство для разработчика: https://developers.google.com/maps/documentation/geocoding/intro

Комментарии 0

*** чтобы писать комментарии.