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.

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
  1. < 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.
  1. function loadScript()
  2. {
  3. var script = document.createElement("script");
  4. script.src = "http://maps.googleapis.com/maps/api/js? key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false&callback=initialize";
  5. document.body.appendChild(script);
  6. }
  7. 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:

Showing the map in your HTML page
  1. <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.
  1. var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
To initialize the map during page load we use the following JavaScript function.
  1. 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.
  1. 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.
  1. 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.
These events can also be used to create an infowindow on clicking the events.