How To Integrate Google Maps into your Web Applications

by Ather Rashid

Google Maps

 

Using Google Maps in a website is really useful when one wants to give some information to the user regarding the location, directions, or the mode of travel to a particular location. Integrating a Google map in a particular website requires a number of steps based on the need of the website.

The first step is to load the Google API. The Google Map API, is a JavaScript library that can be embedded within the web page using a script tag.

For loading the API the syntax used is:

<script src="https://maps.google.com/maps/api/js"></script>

Once the Google API is loaded we need to create a function that will initialize the map and set the properties for the map.

For setting the map properties we create a function initialize:

function initialize() {}

Now in the initialize function we have to create an object that would define the properties of the map.

var map_options={center:new google.maps.LatLng(40.4419, -90.1419),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP};
  • Center property specifies where to center the map or we can create a latlng object to center the map on a specific point.
  • Zoom property is specified for the zoom levels of the map.
  • The MapType Id specifies the map type that we need to display. We can use the following map types that are supported: 
    • road map (normal ,default 2D Map)
    • Satellite (photo graphic map)
    • terrain

Creating a Map Container:

Once the properties are set we need a <div> element for the map.

<div id="googleMap" style="width:500px;height:380px;"></div>

Whatever width and height are set, the map will always inherit the size specifications from the container element.

Creating a Map Object:

Once the CSS is set for the map we create a map object inside the <div> element with id=”googleMap” using the parameters that are passed in map_options. 

var map=new google.maps.Map(document.getElementById("googleMap"), map_options);

Adding a DOM Listener to load the Map:

When all the properties are set for the map we need to have a DOM listener that will execute the initialize function when the page is loaded (Window load). 

google.maps.event.addDomListener(window, 'load', initialize);

Depending upon the need we can have different types of maps that can point to different locations. We just need to create different map objects, 

E.g.

var map1 = new google.maps.Map(document.getElementById("googleMap1"), map_options1);

var map2 = new google.maps.Map(document.getElementById("googleMap2"), map_options2);

var map3 = new google.maps.Map(document.getElementById("googleMap3"), map_options3);

Here map_options(1,2,3) can point to three different locations and according to this the CSS can be assigned to each div element.

Adding Google maps to your webpage is not difficult if you follow the above steps. Try it out!

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Tools & Practices

Tools and Technologies we use at Applied

Contact us now

Popular Posts