Google Maps API in Your Website

Article

What is an API

An Application Programming Interface is a specification used by software components to communicate with each other. Google allows you to use it in Google Maps services in your web page for free.

The following procedure can be used to integrate the Google Maps API in web pages.

Step 1: Create Application Key

Before integrating Google Maps, you should get an Application Key generated from Google. Use the follow procedure.

Visit https://code.google.com/apis/console/
In the page that appears, click on the "Create Project..." button.
The page will redirect you to another page and you can see a list of services. You can see Google Maps API v3 among them turned off. Click on it. Accept the terms and conditions to turn it on.
In the next screen that appears after clicking, you can enter your project name and logo for your project.
You can see the Application Key generated with referrers, activation date and activated user information.
Save the API key (Application Key) since we use them during the implementation.

Step 2: Create a Google Map in your webpage

Here we go. Step 1 guided you through the creation of an Application Key and in the following procedure you will see how to create a Google Maps API in your website.

2.1: Insert your script tag

< script src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE" > < /script>

The <script> tag allows you to include Google Maps in your page. After the "key=" in the URL, we need to insert our application key. The next query string parameter is the "sensor" attribute with senses true or false. It is enabled if any sensors like a GPS are used to track the user's location. If your application needs to use a secured HTTP connection then use src=”https:..”.

2.2: Initializing the map

To load the map, you need to initialize it.

function loadScript()
{
var script = document.createElement("script");
script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;

The best way to initialize the map is on load. Here the loading happens asynchronously. The map load does not depend on the page load.

2.3: Defining the location of the map

Once the map is initialized during the page load, it needs to be given latitude and longitude values as in the following:

var mapProp = {center:new google.maps.LatLng(51.508742,-0.120850),zoom:7,mapTypeId: google.maps.MapTypeId.ROADMAP};

Here mapProp is an object having properties like center, zoom, mapTypeId and so on. The properties can be listed as in the following.

Center: This property allows you to position the map with latitude and longitude information.

Zoom: Allows you to zoom the location. It gives an initial zoom level of the map.

MapTypeId: Specifies the initial map type to display. The following map types are supported in this API:

ROADMAP: loads a normal, default two-dimensional map.
SATELLITE: loads the photographic map.
HYBRID: loads a photographic map with roads and city names.
TERRAIN: loads a view about mountains, rivers, and so on.,

Showing the map in your HTML page

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

This Google Maps API is being loaded based on the Id using a JavaScript function named Map.

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

To initialize the map during page load we use the following JavaScript function.

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

Step 3: Add markers to the Google map

Adding markers to Google maps can be called Overlays.

The marker constructor creates a marker. The Marker method and setMap method are used to have set a markers.

What a marker is

Markers in the Google Maps API are used to locate a single place. You can also animate the marker using the Animation.BOUNCE property.

Polylines

Polylines are used to mark several latitude and longitudes on the Google Maps API.

var myTrip = [stavanger,amsterdam,london];var flightPath = new google.maps.Polyline({path:myTrip,strokeColor:"#0000FF",strokeOpacity:0.8,strokeWeight:2});

It has attributes as in the following:

Path: specifies several latitude and longitude information coordinates for the line.

strokeColor: Specifies the stroke color of the map.

strokeOpacity: Specifies the opacity of the map. It may range from 0.0 to 1.0.

strokeWeight: Specifies the weight of the stroke.

Polygon

Similar to a polyline but this forms a closed loop with three additional attributes, like fillColor, fillOpacity and editable.

Circle

Draws a circle on the map.

InfoWindow

Allows you to draw an infoWindow on the map. A sample example is shown below.

var infowindow = new google.maps.InfoWindow({content:"Hello World!"});infowindow.open(map,marker);

Step 4: Add Events To Your Google Maps API

There are two major events in the Google Maps API. One is the click event and the other is the pan back to the marker event.