It is very common that when we have a contact page in our site we would like to add a Google map to show the location of our company or office. And maybe we’d like to add some information about our company to the map marker as a popup. If you want to do it in a straightforward way, in this post I will show you how to do it. We are going to use Google Maps API to create a fully customizable map. In this tutorial you will learn how to:
- Get your own API key
- Getting started the Google Maps API
- Change the center point of your map
- Add a marker to your map
- Change the colors of your map
- Add a popup to the marker and customize it
If you prefer to jump ahead and take a look at the final code and result click here.
1- Initialize Google Maps API (you are going to get your own API key)
So the first thing that we need to do is go to Google’s developer site and start the process of initializing their API, so click in the button that says “Get a key”, create a new project and after that copy the new key and bring it over into your HTML code.
Copy your new key
Note that you need to replace the current API key with your own on the script line.
2- Let’s get started with Google Maps API
3- Change the center point of your map
To obtain the latitude and longitude of a point we are going to use google maps. Just enter the address or search the place manually, right click on the place you want to center your map and click on the option “What`s here?” , it will pop out a box with the latitude and longitude of this point.
Copy those values and update the var “CenterMap” on your code
Also, you can adjust your map type and zoom level. If you want to increase the zoom, just try a higher value. To change the map type you can use one of the following values: – HYBRID – ROADMAP – SATELLITE – TERRAIN
In addition, you may want to add two more parameters in order to avoid problems with zoom and scrolling: