Google Maps Web API with Examples

Introduction

Google Maps Web API allows the website to display Google Maps. An API is an Application Programming Interface. This API also provides support for customizing Google Maps along with the information i.e. placing pin etc. Google Maps also provide the library for Android and other platforms as well.

Environment for Google Maps Web API

Google Maps Web API is a JavaScript library. In web pages when you need to consume the services of JavaScript API, you include it with the help of <script> tag.

Load Google Maps API

You can add Google Maps to your web page by adding the source for the script to load.

If you want to load Google Maps API Asynchronously:

 

Initializing the Map

To use Google Maps Web API, you must set initial properties for the Map.  Create an initialize() method, and initialize the mapProp object to define the map properties. The mapProp contains the map location with longitude and latitude in LatLng object, zoom level of the map(more the zoom level is, more will be the resolution), and the map type:

Map Types

Google Maps Web API supports 4 type of Maps:

  1. ROADMAP: Normal or Default 2 Dimensional Maps.
  2. SATELLITE: Photographic Maps.
  3. HYBRID: Photographic maps with roads and city names.
  4. TERRAIN: Map with rivers, mountains, etc.

Display Google Map on Web Page

You will need a container to load Google Maps i.e. a div with some id so that it can be accessed:

Now, creating the map object and passing container with mapProp will display the map inside the container.

DOM listener for the map when the page loads.

Here you go, you can now display the map on any web page.

Complete Code for Simple Map on Web Page

Adding Google Map API key

You can get Google Maps JavaScript API from Google Console. As you get for Android, after creating Google account. For providing your Google API key, Google Maps accepts API key in the key parameter at the time of loading. i.e. ?key=<your API key>.

When you plan to use the map on the site with heavy traffic then you must add Google Maps JavaScript API key to your map while loading Google Maps.

Adding Marker to Google Map

The Marker constructor in Google Maps places a marker on the map. Maker only works when you add the position of the marker (For displaying the pin, Google Map API key is compulsory):

The setMap() method of marker displays the marker on the map.

Animating the Pin on Map

If you add animation properties of the map then the marker will start animating.

Show Information on Marker

With an InfoWindow, you can show some information about the location of the maker.

Complete Code for Bouncing Marker with Information

Map Controls

Map controls are shown as small buttons on the map to handle events like zoom level, street view, and pan control etc.

Scale: enable or disable map scale

Rotate: enable or disable map rotate button

StreetView: enable or disable street view

OverviewMap: thumbnail reflecting viewport of current map within wider area.

You can also disable all the default UI controls:

 

Hope that you like this tutorial. Stay tuned for more upcoming tutorials. Stay Blessed!

Leave a Reply

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