Google Maps has become an essential piece for looking up business or residential addresses. With a few clicks, users can look-up any location in the world. Moreover, businesses benefit from it, as it provides higher visibility and also gives users a perspective on what the surrounding areas are. While working with several clients, developing their real estate, hospitality, and care homes websites, Google maps was integrated into their sites.
Let us look at Google Javascript Maps APIs integration with Drupal 7. There are two ways to go about it:
- By using Embed Map
- By using Google Maps Module for Drupal
I went ahead with the first option, with a custom module since the client wanted the same UI throughout, with category options and more.
Map Initialization
Map initialization entails loading the Google Maps JavaScript API. To load the Google Maps JavaScript API, use the ‘script’ tag like the one shown below:
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
Once this is done, we need to allocate a spot on the webpage for the Maps to be displayed. This is done by creating an element ‘div’
<div id="map"></div>
There are two required options for every map: center and zoom.
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
The Zoom Parameter
This property sets the initial resolution of displaying the map. Zoom 0 displays a fully zoomed out map of the Earth, similarly higher zoom levels, Zoom in at a higher resolution.
The following list shows the approximate level of detail you can expect to see at each zoom level:
1: World
5: Landmass/continent
10: City
15: Streets
20: Buildings
Learn more about the Zoom parameter here: https://developers.google.com/maps/documentation/javascript/tutorial
Generate Marker
The purpose of a marker is to pinpoint a location on the map. It uses a standard image by default but can also display custom images, which are referred as ‘icons’. They are specifically designed to be interactive.
var faichi = {lat: 18.555406, lng: 73.797388};
var marker = new google.maps.Marker({
position: faichi,
icon: marker_icon,
map: map,
animation: google.maps.Animation.DROP,
});
Apart from this you may remove a marker, animate it, customize a marker image (complex and simple icons), or make it draggable. Learn more about it here: https://developers.google.com/maps/documentation/javascript/markers
Google Places Service
The Google Places API Web Service fetches information about places that are defined within this API as establishments, geographic locations, or prominent points of interest — using HTTP requests.
To use the functionality contained within this library, you must first load it using the libraries parameter in the Maps API bootstrap URL:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
Text Search Requests
The Google Places API Text Search Service is a web service that returns information about a set of places based on a string — for example "pizza in New York" or "shoe stores near Ottawa" or "123 Main Street". The service responds with a list of places matching the text string and any location bias that has been set.
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
This method takes a request with the following fields:
- query*
- a location
- a radius
CallBack Function:
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
Info windows
An InfoWindow displays content (usually text or images) in a popup window above the map, for a given location. The info window has a content area and a tapered stem. This tip is attached to the specified location on the map.
var contentString = “Faichi Solutions”;
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: {lat: 18.555406, lng: 73.797388},
map: map,
title: 'Faichi'
});
marker.addListener('click', function() {
infowindow.open(map, marker);
});
}
The info window is typically attached to the marker, but it can also be attached to a specific latitude/longitude.
Learn more about opening an info window, closing it and moving it here: https://developers.google.com/maps/documentation/javascript/infowindows
Directions Service
Directions can be calculated through various means of transport by using the DirectionsService object. It communicates with the Google Maps API Directions Services which receives direction requests and comes up with an efficient path.
Travel time is the primary factor which is optimized, but other factors such as distance, number of turns and many more may be taken into account.
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places,geometry"></script>
var directionsService = new google.maps.DirectionsService;
directionsService.route({
origin: distinationOrigin.geometry.location,
destination: destination_main_data.geometry.location,
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
computeTotals(response, infowindow);
} else {
window.alert('Directions request failed due to ' + status);
}
});
For more details on the Google Maps API you can reach out to us at inform@faichi.com! Happy coding ☺