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>
myMap is a google map and defined by the user(Us).
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>
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.
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.
This statement will create a Google Map on the fly with the given properties and assign the output to div tag with id "googleMap".var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
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:
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.