Pages

Footer Pages

Spring Boot

Java String API

Java Conversions

Kotlin Programs

Kotlin Conversions

Java Threads Tutorial

Java 8 Tutorial

Tuesday, July 30, 2019

HTML - Adding Google Maps to Web Page - API Example

1.Overview


In this tutorial, We'll learn how to add Goole Maps to your website or page.

This is very easy to understand adding Google maps to the web page.

To make maps available on a web page, we must include the google maps API using the below script.

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

You have to register and get the key from https://cloud.google.com/maps-platform/. Without the key, maps can not be loaded.

myMap is a google map and defined by the user(Us).


HTML - Adding Google Maps to Web Page


2. HTML Google Maps Example


First Step: We have to create the div tag with no content in it. Just set the width to 100% and height to 400 pixels. These vales can be modified to your values.

<div id="googleMap" style="width:100%;height:400px;"></div>

Second Step: Create a map with key, value pairs as below. Ref Map Types.

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

Here setting the location of Map when maps appear on the web page.

Third Step: Let us create a function and add the above code to the method.

function myMap() {
var mapProp= {
 center:new google.maps.LatLng(51.508742,-0.120850),
 zoom:5,
};
}

Fourth Step: Create an instance of Map and pass the div tag id that we have created in step one. This line also should be part of the above method.

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

This statement will create a Google Map on the fly with the given properties and assign the output to div tag with id "googleMap".

Complete method:


function myMap() {
  var mapProp= {
     center:new google.maps.LatLng(51.508742,-0.120850),
     zoom:5,
  };

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

3. Full Maps Example code


The below is the complete full code for the above steps to embed google map in the web page. This is created in HTML 5.

<!DOCTYPE html>
<html>
<body>

<h1>My First Google Map</h1>

<div id="googleMap" style="width:100%;height:400px;"></div>

<script>
function myMap() {
var mapProp= {
  center:new google.maps.LatLng(51.508742,-0.120850),
  zoom:5,
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
}
</script>

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

</body>
</html> 

Output:

google-maps


4. Adding a Google Map with a Marker to Your Website 


There are three steps to creating a Google map with a marker on your web page:


  • Create an HTML page
  • Add a map with a marker
  • Get an API key


Below is the complete full code.

<!DOCTYPE html>
<html>
  <head>
    <style>
       /* Set the size of the div element that contains the map */
      #map {
        height: 400px;  /* The height is 400 pixels */
        width: 100%;  /* The width is the width of the web page */
       }
    </style>
  </head>
  <body>
    <h3>My Google Maps Demo</h3>
    <!--The div element for the map -->
    <div id="map"></div>
    <script>
// Initialize and add the map
function initMap() {
  // The location of Uluru
  var uluru = {lat: -25.344, lng: 131.036};
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 4, center: uluru});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: uluru, map: map});
}
    </script>
    <!--Load the API from the specified URL
    * The async attribute allows the browser to render the page while the API loads
    * The key parameter will contain your own API key (which is not needed for this tutorial)
    * The callback parameter executes the initMap() function
    -->
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

5. Conclusion


In this short article, We've seen how to embed a Google Maps in a web page.

Explained with a step by step to write the HTML and javascript code.

Google API is free to use but limited to 1000 times per day to a web site.

And also a page can be embedded with multiple google maps.

var map1 = new google.maps.Map(document.getElementById("googleMap1"), mapOptions1);
var map2 = new google.maps.Map(document.getElementById("googleMap2"), mapOptions2);
var map3 = new google.maps.Map(document.getElementById("googleMap3"), mapOptions3);
var map4 = new google.maps.Map(document.getElementById("googleMap4"), mapOptions4);

Please write your questions in the comments section.

Reference

No comments:

Post a Comment

Please do not add any spam links in the comments section.