Google Maps API

Google Maps API is used to integrate google map in website, mobile app etc.Google Maps has a JavaScript API, embed html code  to customize the maps and display them on your webpage.

Types of Maps:

There are four types of google maps.

1. ROADMAP − This is the default type. It shows the street view of the selected region.
2. SATELLITE − It shows the satellite images of the selected region.
3. HYBRID − It shows the major streets on satellite images.
4. TERRAIN − It shows the terrain and vegetation

How to integrate Google Maps API in HTML?

Google Maps API (Application Programming Interface) shows various types of geographical information in web page. Google map source can be embbed in HTML.

Syntax :

Loading Map Using Embed Code

<iframe
  width="600"
  height="450"
  style="border:0"
  loading="lazy"
  allowfullscreen
  src="https://www.google.com/maps/embed/v1/place?key=API_KEY
    &q=location+address">
</iframe>

You need google API_KEY to integrate above google map embed code into your web page. Also provide your location address in query q.

Loading Map Using JavaScript API

Javascript api 'https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap' is used to show google map in website. We need Google API KEY to integrate this Javascript api in web page. Learn how to create google api key for map at below link.

https://developers.google.com/maps/documentation/javascript/get-api-key

Also provide latitude and longitude of your location in function loadMap().

Google map loaded by javascript api can be display by <div> tag in html.

Syntax :

<script src = "https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"></script>

<script>
         function loadMap() {
            
            var mapOptions = {
               center:new google.maps.LatLng(latitude, longitude),
               zoom:12,
               mapTypeId:google.maps.MapTypeId.ROADMAP
            };
                
            var map = new google.maps.Map(document.getElementById("mapid"),mapOptions);
         }
            
         google.maps.event.addDomListener(window, 'load', loadMap);
      </script>

 <div id = "mapid" style = "width:95%; height:400px;"></div>

Above google map api shows the street view of the selected region because mapTypeId is ROADMAP.

Example :

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3640.09682635161!2d72.41302531453361!3d24.168336784385044!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x395cebe08199bd53%3A0x77467e404104e0aa!2sAryaTechno!5e0!3m2!1sen!2sin!4v1618996283668!5m2!1sen!2sin" width="90%" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

Output :