Please follow the below simple steps to have Google map visible on the UI-
Step 1) Create a container div for the google map, and give it a size as per the need-
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 500px;
height: 400px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
</html>
Step 2) Load the Google Maps JavaScript API v3.
Load the Google Maps API by adding a <script> tag to the end of the <body> section of your HTML. This script downloads the code required to display maps on your page and will not block the loading of other resources.
<script src="https://maps.googleapis.com/maps/api/js"
async defer></script>
Step 3) Creates and displays a Google Map in the div.
Below code creates a new Google Maps object:
var map = new google.maps.Map();
We need to make a reference to the div that the map will be loaded into.Options for the map, such as the center, zoom level, and the map type. There are many more options that can be set, but these three are required.
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 44.540, lng: -78.546},
zoom: 8
});
}
</script>
Step 4) Final Code
So the final test html will look like this which can be tested on any browser
This snippet can used as a base for integrating the google map in your site by dynamically supplying the values for longitude, latitude, zoom and other options-
<!DOCTYPE html>
<html>
<head>
<style>
#map {
width: 800px;
height: 500px;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
center: {lat: 52.86098, lng: -8.21097},
zoom: 15
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
No comments:
Post a Comment