How to Integrate Google Maps in a Web Application?

Google Maps integration in web app is a useful solution that extends functionality, enhances usability and can help to attract new customers. Although the majority of competitors have already been left behind, Google doesn’t take it for granted and constantly works on the improvements and handy tools.

One of the pending features is ability to build lists of favorite or starred places, along with checklists of those places users wish to visit. Similar online list-making option is also offered by Foursquare. Currently it is in test and available only within a Local Guides program, in other words to Maps contributors, who have reached Level 2 or higher.

Among other helpful features in-process there will be highlighted areas of interest – places in the nearby with lots of activities, like bars, theaters, music venues, hotels and others. Such areas are orange-shaded and to see the details, users just need to zoom in and tap each venue for more information. What is more, Google improves the color scheme, making it more balanced and subtle.

To integrate Google Map in website or application you need to take a number of steps, based on your specific needs and business goals. You should start with API generation and proceed with direct integration into a web app.

Implement Google Maps in web application: Step-by-step guide

• Open developers console
• Choose 'Create Project' a drop-down menu next to 'Google APIs'

• Enter your Project Name and click the 'Create' button
• Choose suitable API from the 'Google Maps APIs' List - in our case it's “Google Maps JavaScript API”

• Click 'Enable' button to enable chosen API for the project
• Make sure that new project is selected in a drop-down menu at the top of the page (Google APIs)

• Click 'Credentials' button at the right side of the page

• Click small white arrow on the 'Create Credentials' button and choose 'API Key' to create API Key for the project

• Copy and save generated API Key to use it in your application

To get more detailed information please proceed to Google Maps API tutorial.

Read also: To Develop a Web App: How Long & How Much?

Add Google Maps in web app: manual for startups

In most cases you may use similar Node.js libraries.

• Open terminal
• Run the following command in order to get the module installed: npm install googlemaps

*you may add --save key to get the module saved into your package.json file

• Require the module in your code by adding the following string:

const GoogleMapsAPI = require('googlemaps');

• Now you need to set Google configurations. Use the following format:

const config = {
  key              :'API Key', //use the API key you generated previosuly
  stagger_time     :1000,
  encode_polylines :false,
  secure           :true
};

This is a prompt Google Maps API example of config file. Full version can be found here.

• Create a new Google Maps object:

const googleMapsApi = new GoogleMapsAPI(config);

This is a complete tutorial on how to integrate Google Maps in a web app. The full embodiment part will look like the code below:

'use strict';
const GoogleMapsAPI = require('googlemaps');
const config = {
  key               :'API Key',
  stagger_time      :1000,
  encode_polylines  :false,
  secure            :true
};
const googleMapsApi = new GoogleMapsAPI(config);

Google Maps useful features for business:

• Walking and driving directions. Beyond that users can get biking and public transport directions. In larger areas you can even make a choice between multiple options.  
• Mobile access and offline maps. Customers can get directions right from their phones and without GPS. Offline maps of particular areas can be downloaded and viewed without internet connection. Best solution while traveling or while visiting places with spotty connection.
• Ability to share directions from computer to your smartphone. Those people, who prefer trips planning from computer, can easily send navigation directions to their phones. Being signed into Google account, select a destination and choose option “Send directions to your phone”. In the drop-down menu choose your device and preferred method of sharing.
• Ordering Uber. Ride-sharing estimates were added back in March and Uber fare estimation is displayed as an ad. Clicking one of the cards users can order a car or download Uber app. Currently there are even more ride share alternatives, like Grab, Gett, Hailo, MyTaxi, GO-JEK and others, depending on your location.
• Google+ sharing. Google Maps allows users to share their location with family and friends via Google+ Locations. 

Ready to build your own web app with Google Maps integration? – Contact us today and we will be glad to see you among our clients.