Используем карты Google

Подключаем Google-карты у себя на сайте

Чтобы подключить карты Google на своем сайте, нужно немногое. Мы легко можем воспользоваться конструктором карт от гугла или же яндекса, но в нашем примере покажем совсем немного разнообразия. Мы подключим гугл-карту, поставим на нее 2 метки с кастомными картинками и изменим стиль карты, сделаем ее чуть серой :-)

Наши действия.

Сначала подключаем js-файл http://maps.googleapis.com/maps/api/js?key=ПишемСвойКлюч&sensor=false с Вашим ключом. И сам javascript-код.

    function initMap() {
        // Центр карты, пусть будет Красная площадь
        var myLatlng_main = new google.maps.LatLng(55.754298, 37.620049);
        
        // Координаты меток
        var myLatlng1 = new google.maps.LatLng(55.754697, 37.621272); // ГУМ
        var myLatlng2 = new google.maps.LatLng(55.753707, 37.620188); // Мавзолей
        
        // Объект параметров
        var mapOptions = {
            center: myLatlng_main,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP    
        };
        
        // Создаем карту в контейнере с id="map"
        var map = new google.maps.Map(document.getElementById("map"), mapOptions);
        
        // Стилизуем первый маркер
        var marker1 = new google.maps.Marker({
            position: myLatlng1,
            map: map,
            icon: '/img/marker1.png',
            title:"ГУМ"
        });
        // Стилизуем второй маркер
        var marker2 = new google.maps.Marker({
            position: myLatlng2,
            map: map,
            icon: '/img/marker2.png',
            title:"Мавзолей"
        });
        
        // Задаем стили карты
        var styles=
            [
                {
                "stylers": 
                    [
                        { "hue": "#0066ff" },
                        { "saturation": -100 }
                    ]
                }
            ];
            
        // Применяем стили к карте
        map.setOptions({styles: styles});
    }

    // Подключаем карту после загрузки документа
    jQuery(document).ready(initMap);

Руководство по стилизации карт можно найти здесь