$show=/label

HTML - Adding Google Maps to Web Page - API Example

SHARE:

A short quick guide to embedding a Goole Map on a web page using Google API and using Marker.

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

COMMENTS

BLOGGER

About Us

Author: Venkatesh - I love to learn and share the technical stuff.
Name

accumulo,1,ActiveMQ,2,Adsense,1,API,31,ArrayList,16,Arrays,2,Bean Creation,3,Bean Scopes,1,BiConsumer,1,Blogger Tips,1,Books,1,C Programming,1,Collection,4,Collections,20,Collector,1,Command Line,1,Compile Errors,1,Configurations,7,Constants,1,Control Statements,8,Conversions,5,Core Java,73,Corona India,1,Create,2,CSS,1,Date,2,Date Time API,3,Dictionary,1,Difference,1,Download,1,Eclipse,2,Efficiently,1,Error,1,Errors,1,Exception,1,Exceptions,3,Fast,1,Files,9,Float,1,Font,1,For examples,1,For loop examples,1,For Loop in Java,1,Form,1,Freshers,1,Function,3,Functional Interface,2,Garbage Collector,1,Generics,4,Git,4,Grant,1,Grep,1,HashMap,1,HomeBrew,2,HTML,2,HttpClient,2,Immutable,1,Inner for loops,1,Installation,1,Interview Questions,5,Iterate,2,Jackson API,3,Java,28,Java 10,1,Java 11,5,Java 12,5,Java 13,2,Java 14,2,java 5 For loop,1,Java 8,48,Java 9,1,Java Design Patterns,1,Java Files,1,Java for loop,1,Java Program,2,Java Programs,65,java.lang,5,java.util. function,1,jQuery,1,Kotlin,10,Kotlin Programs,6,Lambda,1,lang,29,Leap Year,1,live updates,1,Mac OS,2,Math,1,Maven,1,Method References,1,Mockito,1,MongoDB,3,Nested for loop,1,Nested for loop examples,1,New Features,1,Operations,1,Optional,4,Oracle,5,Oracle 18C,1,Partition,1,Patterns,1,Programs,1,Property,1,Python,2,Quarkus,1,Read,1,Real Time,1,Recursion,2,Remove,2,Rest API,1,Schedules,1,Serialization,1,Servlet,1,Sorting Techniques,8,Spring,2,Spring Boot,23,Spring Email,1,Spring MVC,1,Stream,3,Streams,11,String,48,String Programs,8,String Revese,1,Swing,1,System,1,Tags,1,Threads,8,Tomcat,1,Tomcat 8,1,Troubleshoot,16,Unix,2,Updates,3,util,5,While Loop,1,
ltr
item
JavaProgramTo.com: HTML - Adding Google Maps to Web Page - API Example
HTML - Adding Google Maps to Web Page - API Example
A short quick guide to embedding a Goole Map on a web page using Google API and using Marker.
https://1.bp.blogspot.com/-111GZkt4oPA/XT-sha4yD8I/AAAAAAAABxs/ZGNkkzyMeGEcyKZMTb1IKAe2B7VzEHkRwCLcBGAs/s320/HTML%2B-%2BAdding%2BGoogle%2BMaps%2Bto%2BWeb%2BPage.png
https://1.bp.blogspot.com/-111GZkt4oPA/XT-sha4yD8I/AAAAAAAABxs/ZGNkkzyMeGEcyKZMTb1IKAe2B7VzEHkRwCLcBGAs/s72-c/HTML%2B-%2BAdding%2BGoogle%2BMaps%2Bto%2BWeb%2BPage.png
JavaProgramTo.com
https://www.javaprogramto.com/2019/07/google-maps.html
https://www.javaprogramto.com/
https://www.javaprogramto.com/
https://www.javaprogramto.com/2019/07/google-maps.html
true
3124782013468838591
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Content