final result

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:

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.

final result

Copy your new key

final result

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.

final result

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

var map; function initMap() { //center map var centerMap = {lat: -34.905919, lng: -56.195895}; map = new google.maps.Map(document.getElementById('tower-map'), { 'center' : centerMap, 'zoom' : 12, }); }

‍

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.

final result

Copy those values and update the var “CenterMap” on your code

var centerMap = {lat:37.790048 , lng:-122.398162 };

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

map = new google.maps.Map(document.getElementById('tower-map'), { 'center' : centerMap, 'zoom' : 20, 'mapTypeId' : google.maps.MapTypeId.SATELLITE, });

In addition, you may want to add two more parameters in order to avoid problems with zoom and scrolling:

scrollwheel: false, gestureHandling: 'cooperative',

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.

final result
styles:[{"featureType":"landscape.natural","elementType":"geometry.fill","stylers":[{"visibility":"on"},{"color":"#e0efef"}]}...

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.

var centerMap = {lat: -34.905919, lng: -56.195895}; var officeLocation = {lat: -34.905919, lng: -56.195895}; var marker = new google.maps.Marker({ 'position': officeLocation, 'map': map, 'title': 'Ro Branco 1373 Oficina 701 - Montevideo' });

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.

icon:{ url: "url/of/the/image.png" }

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

#tower-map { width: 100%; height: 400px; } #map-canvas img { max-width: none !important; } .gm-style-iw { width: 355px !important; top: 0px !important; left: 0px !important; background-color: #fff; box-shadow: 0 1px 6px rgba(178, 178, 178, 0.6); padding: 25px; border-radius: 2px 2px 10px 10px; } #iw-container { margin-bottom: 10px; } #iw-container .iw-title { font-family: 'Open Sans Condensed', sans-serif; font-size: 22px; font-weight: 400; padding: 10px; background-color: #ef8423; color: white; margin: 0; border-radius: 2px 2px 0 0; } #iw-container .iw-content { font-size: 13px; line-height: 18px; font-weight: 400; margin-right: 1px; padding: 15px 5px 20px 15px; max-height: 140px; overflow-y: auto; overflow-x: hidden; } .iw-subTitle { font-size: 16px; font-weight: 700; padding: 5px 0; }

If you want to see the final result just click on the marker… I hope this tutorial has been useful for you!