imitronov

imitronov

Кто я?

Веб разработчик. Работаю с WordPress, 1C-Bitrix, modX, OctoberCMS. Делаю обзоры онлайн сервисов и малоизвестных CMS.


О чем я пишу


Свежие записи

Google Maps API

Добавляем карту Google на сайт с помощью апи и настраиваем ее под себя

Добавить карту Google Maps на сайт через JS API

  • Получаем ключ API_KEY (доступно по ссылке: Google Maps API Key )

  • Узнаем географические координаты с помощью сервиса: Google Geocoder

  • Копируем код и заменяем координаты, текст подсказки и цвета на свои значения:

<div id="map_canvas" style="height: 400px; width: 100%;"></div>
<script>
var geocoder;
function initialize() {
    geocoder = new google.maps.Geocoder();
    var myLatlng = new google.maps.LatLng(44.000000,37.000000);
    var myOptions = {
        zoom: 16,
        center: new google.maps.LatLng(44.002100,37.000000),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        scrollwheel: false,
          styles: [
            {elementType: 'geometry', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.stroke', stylers: [{color: '#242f3e'}]},
            {elementType: 'labels.text.fill', stylers: [{color: '#746855'}]},
            {
              featureType: 'administrative.locality',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'geometry',
              stylers: [{color: '#263c3f'}]
            },
            {
              featureType: 'poi.park',
              elementType: 'labels.text.fill',
              stylers: [{color: '#6b9a76'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry',
              stylers: [{color: '#38414e'}]
            },
            {
              featureType: 'road',
              elementType: 'geometry.stroke',
              stylers: [{color: '#212a37'}]
            },
            {
              featureType: 'road',
              elementType: 'labels.text.fill',
              stylers: [{color: '#9ca5b3'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry',
              stylers: [{color: '#746855'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'geometry.stroke',
              stylers: [{color: '#1f2835'}]
            },
            {
              featureType: 'road.highway',
              elementType: 'labels.text.fill',
              stylers: [{color: '#f3d19c'}]
            },
            {
              featureType: 'transit',
              elementType: 'geometry',
              stylers: [{color: '#2f3948'}]
            },
            {
              featureType: 'transit.station',
              elementType: 'labels.text.fill',
              stylers: [{color: '#d59563'}]
            },
            {
              featureType: 'water',
              elementType: 'geometry',
              stylers: [{color: '#17263c'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.fill',
              stylers: [{color: '#515c6d'}]
            },
            {
              featureType: 'water',
              elementType: 'labels.text.stroke',
              stylers: [{color: '#17263c'}]
            }
          ]
    }
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var infowindow = new google.maps.InfoWindow({
        content: '<div style="text-align: center;"><p><b>Название организации</b></p><p>Адрес</p><p>Телефон</p></div>',
        size: new google.maps.Size(150, 50)
    });

    var marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "Название организации"
    });

    infowindow.open(map, marker);
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
}
</script>
<script>window.onload = function () { initialize(); }</script>
  • Подключаем скрипт API карт от гугла (с указанием вашего ключа) в любом месте страницы
<script src="https://maps.google.com/maps/api/js?key=YOUR_API_KEY" async></script>