Google Maps – insert and style (stylize) maps on your site

Карты Google Maps - вставка и оформление (стилизация) карт на свой сайт

Hello everyone! Today we will learn not only to install a Google Maps map on our site (any html page), but also to stylize Google Maps – change the map colors, as well as add a description to the Google Maps map marker, change the view (image) of the marker and add our own description. Go!)

Important note. We will do all our experiments locally. In order to use Google Maps on your website, you need to get a special Auth key. This is not difficult to do. We will omit its receipt and will not consider it.

1. Insert Google Maps

First, let’s create an html page and insert a Google Maps into it. We will do this using the Google Maps API. That is, let’s go the advanced way. It should be noted that Google has good documentation and instructions in Russian and English on using Google Maps. So programmers can go there right away. If you want to get a clear step-by-step lesson, then stay.

Now I will describe in turn the actions that need to be done and after that I will give the code of the page with comments. First, we create an HTML page. Then:

  1. On the page, create an element

    inside which we will display the Google Maps.

  2. You need to style this element, set its height and width so that it can be seen on the page.
  3. We connect the Google Maps Api library to create and manage a map. The card will not work without this library.
  4. We are writing a script that will create and display the Google Maps on the page.

Here is the page code that we got. Pay attention to the comments inside, I described what is happening and where.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01 - My Google Map</title>
    
    <!-- 2. Необходимо стилизовать этот элемент, задать ему высоту и ширину чтобы он был виден на странице -->
    <style>
        #map {
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    
    <!-- 1. Создаем элемент внутри которого у нас будет отображаться карта Google Maps -->
    <div id="map"></div>

    <!-- 4. Пишем скрипт который создаст и отобразит карту Google Maps на странице. -->
    <script type="text/javascript">

        // Определяем переменную map
        var map;

        // Функция initMap которая отрисует карту на странице
        function initMap() {

            // В переменной map создаем объект карты GoogleMaps и вешаем эту переменную на <div id="map"></div>
            map = new google.maps.Map(document.getElementById('map'), {
                // При создании объекта карты необходимо указать его свойства
                // center - определяем точку на которой карта будет центрироваться
                center: {lat: -34.397, lng: 150.644},
                // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.
                zoom: 8
            });
        }
    </script>

    <!-- 3. Подключаем библиотеку Google Maps Api, чтобы создать карту -->
    <!-- Атрибуты async и defer - позволяют загружать этот скрипт асинхронно, вместе с загрузкой всей страницы  -->
    <!-- В подключении библиотеки Google Maps Api в конце указан параметр callback, после  подключения и загрузки этого Api сработает функция initMap для отрисовки карты,  которую мы описали выше -->
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
    
</body>
</html>

Now we have such a map, but there is not enough marker to indicate the location.
You will also ask how to indicate the address that we need on the map.

2. Google Maps Api – define the location and set the marker

2.1 Determine the place of centering the map

Let’s show the location of the Bolshoi Theater on the map. In the center parameter, we defined the coordinates for centering the map:

center: {lat: -34.397, lng: 150.644},

We need to get such coordinates for our location. To do this, go to the regular version of Google Maps and right-click on the place of interest to us. Click “What’s here” and get the coordinates of the place. (55.760186, 37.618711). At the same time, I will change the scale by setting it to 18: zoom: 18

Determining the coordinates of a place for a marker on Google Maps

2.2 Setting the marker

The place was determined. It remains to show the marker on the map. Inside the initMap () function, add a variable for the marker:

// Создаем маркер на карте
var marker = new google.maps.Marker({

    // Определяем позицию маркера
    position: {lat: 55.760186, lng: 37.618711},

    // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)
    map: map,

    // Пишем название маркера - появится если навести на него курсор и немного подождать
    title: 'Наш маркер: Большой театр'
});

We now have a map with a marker

Setting a marker on Google Maps

How to add a click event to a map or marker in Google Maps

You can also add your event by clicking on the marker. We will not do this in the final page code. But this is done like this:

google.maps.event.addListener(marker, 'click', function() {
   document.location='http://google.com';
});

The first parameter of the method addListener – this is the object for which the event is added, in our case marker… The object can be not only a marker, but also the map itself. Second parameter click defines the type of event, in this case one click. The third is the handler function that will be triggered.

For more details about the marker and the possibilities of working with it, I recommend looking at the documentation.

2.3 Setting your own icon for the marker in Google Maps

The marker is installed. But it’s standard, and it’s not interesting at all. Let’s replace it with our own icon. I found one suitable icon that we will use.

I will add an icon to the description of a variable with a marker.

// Создаем маркер на карте
var marker = new google.maps.Marker({

                // Определяем позицию маркера
                position: {lat: 55.760186, lng: 37.618711},

                // Указываем на какой карте он должен появится. (На странице ведь может быть больше одной карты)
                map: map,

                // Пишем название маркера - появится если навести на него курсор и немного подождать
                title: 'Наш маркер: Большой театр',

                // Укажем свою иконку для маркера
                icon: 'theatre_icon.png'
});

More complex icons can be found in the documentation.

3. Set your design styles for Google Maps

It’s time to color our map. Give it a special and unique look. We will do this using the Snazzy Maps service, which has a large number of skins for Google maps. And it allows you to make such cool maps:

Insert a stylized Google Maps - Snazzy Maps com.  Change the colors of the map.

I chose a map style called Blue water. On the page of this style, you can find the code for the design and download a file with an example of applying this style to a Google Maps.

Add styles for the map to the property styles which we specify for the variable map – when we create an object with a map in it.

Here is the entire piece of code:

// В переменной map создаем объект карты GoogleMaps
map = new google.maps.Map(document.getElementById('map'), {
                // При создании объекта карты необходимо указать его свойства
                
                // center - определяем точку на которой карта будет центрироваться
                center: {lat: 55.760186, lng: 37.618711},
                
                // zoom - определяет масштаб. 0 - видно всю платнеу. 18 - видно дома и улицы города.
                zoom: 18,

                // Добавляем свои стили для отображения карты
                styles: [{"featureType":"administrative","elementType":"labels.text.fill","stylers":[{"color":"#444444"}]},{"featureType":"landscape","elementType":"all","stylers":[{"color":"#f2f2f2"}]},{"featureType":"poi","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"road","elementType":"all","stylers":[{"saturation":-100},{"lightness":45}]},{"featureType":"road.highway","elementType":"all","stylers":[{"visibility":"simplified"}]},{"featureType":"road.arterial","elementType":"labels.icon","stylers":[{"visibility":"off"}]},{"featureType":"transit","elementType":"all","stylers":[{"visibility":"off"}]},{"featureType":"water","elementType":"all","stylers":[{"color":"#46bcec"},{"visibility":"on"}]}]
});

Now our map looks like this:

Insert a stylized Google Maps.  Custom design for Google Maps.

4. Information windows

The map can be further improved by adding an information window by clicking on our marker. The documentation for them is here. In short, to add an info window you need to:

  1. Create the window itself and the content inside it
  2. Make it appear by clicking on the marker.

It all happens inside a function initMap()

4.1 Let’s describe the content of the info-window:

// Создаем наполнение для информационного окна
var contentString = '<div id="content">'+
'<div id="siteNotice">'+
'</div>'+
'<h1 id="firstHeading" class="firstHeading">Большой театр</h1>'+
'<div id="bodyContent">'+
'<p>Госуда́рственный академи́ческий Большо́й теа́тр Росси́и, или просто Большой театр — один из крупнейших' +
'в России и один из самых значительных в мире театров оперы и балета.</p>'+
'<p><b>Веб-сайт:</b> <a href="http://www.bolshoi.ru/" target="_blank">bolshoi.ru</a>'+
'</p>'+
'</div>'+
'</div>';

4.2 Create an info window

// Создаем информационное окно
var infowindow = new google.maps.InfoWindow({
     content: contentString,
     maxWidth: 400
});

4.3 We make it so that by clicking on the marker – the info-window appears

// Создаем прослушивание, по клику на маркер - открыть инфо-окно infowindow
marker.addListener('click', function() {
     infowindow.open(map, marker);
});

Now the map with the info window looks like this:

Add info window and description to marker on Google Maps.

You can also remove standard controls from the map, enable / disable necessary and unnecessary ones, and even create your own. You will find a description of all this in the documentation.

Ready card

The finished resulting map and code can be viewed below or on the codepen.

See the Pen Google Map by Yurij (@rightblog) on ​​CodePen.18493

Related links:

Google Maps JavaScript API Documentation

Mastering the Google Maps API

Google Maps: Move maps and markers

Leave a Reply

Your email address will not be published. Required fields are marked *