Hello! Today we will learn not only how to install a Google Maps map on our website (any html page), but also how to stylize Google Maps - change the colors of the map, add a description to the marker on Google Maps, change the type (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 site you need to get a special Auth key. Make it easy. We will omit its receipt and will not consider it.
1. Inserting Google Maps
First, let's create an html page and insert a Google Maps on 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 immediately go there. 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, create an HTML page. Then:
- Create an element on the page
Here is the page code we got. Pay attention to the comments inside, I described what is happening and where.
Now we have such a map, but there is not enough marker to indicate the place.
You will also ask how to indicate on the map the address that we need.
2.1 determine the center of the map
Let's show on the map the location of the Bolshoi Theater. In the center parameter, we determined the coordinates of the map centering:
We need to get such coordinates for our place. To do this, go to the regular version of Google Maps and right-click on the location of interest to us. Click "What is 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.
How to add an event by clicking on 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 code of the page. But this is done like this:
The first parameter of the addListener method is the object for which the event is added, in our case marker. The object can be not only a marker but also the card itself. The second click parameter determines the type of event, in this case one click. The third is a handler function that will work.
In more detail about the marker and the possibilities of working with it, I recommend looking at the documentation.
3. Define your own styles for the map Google Maps
It's time to colorize 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 cards:
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 - applying this style to the Google Maps.
We add styles for map design to the styles property that we specify for the map variable - when we create an object with a map in it.
Here is the whole code snippet:
Now our map looks like this:
4. Information windows
The map can be further improved by adding an information window by clicking on our marker. The documentation for them lies here. In short, to add an info window you need to:
- Create the window itself and the content inside it
- Make it appear by clicking on the marker.
All this happens inside the initMap () function
4.3 We make it so that by clicking on the marker - an info window appears
Now the map with the info window looks like this:
You can also remove standard controls from the card, turn on / off the necessary and unnecessary, and even create your own. You will find a description of all this in the documentation.