Гугл карта для сайта - 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

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