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
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.
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
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.
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
.jpg)
.webp)
