
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

This is the only HTML code you need. We create a div element named “map” to hold the Map and we load the Google Maps JavaScript API using a script tag.
<div id='tower-map'></div>
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
We create a new .js document and define a javascript function that creates a map in the div. Also we create the variable “centerMap” where we will save the coordinates of our maps’ center. JavaScript
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:
4- Change the colors of your map
You can customize the color of the terrain, water, and road of your map. In Snazzy Maps you will find dozens of map styles that you can pick the code and copy to yours. Just find the style that matches best with your site, copy the code and paste it into your JavaScript file.

5- Add a marker to your map
First, we need to define the variable “officeLocation” and use the same cordinates of var “centerMap”. In addition, let’s define de variable “marker” and its position will be the var officeLocation. If you want you can set a title for when somebody hovers on the marker.
Custom Marker: If you prefer you can add a custom marker or your company logo. Just add the parameter “icon” followed by the URL of the image.
6- Add a popup to the marker and customize it
Let’s create a pop-up window that shows more information in the context of the map when we click on that marker. So, we’ll create a variable which is instantiating this Google Maps InfoWindow class, and then we’ll pass into it an object with one key, content, whose value is this content string. And then finally, let’s add the marker.add.listener, so this is an event listener using the custom Google Maps event listener library to add a click-handler which then opens the info window.
var popUpContent = '<div id="iw-container">' + '<div class="iw-title">Towerhousestudio</div>' + '<div class="iw-content">' + '<img src="/wp-content/uploads/new-office-working.jpg" alt="Tower office" width="300" height="161">' + ' TowerHouseStudio is born to help our partners generate rapid prototypes and scale them up as the business grow. ' + '<div class="iw-subTitle">Contact</div>' + ' Rio Branco 1373 Ap. 701 3830-292 Montevideo - Uruguay '+ ' Phone. (917) 231-2775 +598 2903 5577 ' + '<div class="iw-bottom-gradient"></div>' + '</div>'; var infowindow = new google.maps.InfoWindow({ 'content': popUpContent, }); marker.addListener('click', function() { infowindow.open(map, marker); });
Now to finish, we are going to add some styles to the map container and the popup in order to customize it. CSS
If you want to see the final result just click on the marker… I hope this tutorial has been useful for you!