Updated June 1, 2023
Introduction to HTML Google Maps
In HTML, we have discussed some properties and attributes with the elements in previous articles. Its have many features to attract online users in web technology. That Google map is one of the features of Google Company in that we will use the same Google map in our HTML codes for displaying the location on the website. It is mainly used for the company websites to identify the location exactly where they are located in the areas. It is called upon the HTML by using javascript language for locating and setting the latitude and longitude for Geo-locations for the companies.
Syntax:
HTML has a general syntax for every tag to develop the web page’s contents.
<html>
<body>
<script src="google-api url">
function()
{
}
</script>
</body>
</html>The syntax for the HTML Google map is adding the Google API in the script tag then we will set the geo-locations of the web page contents. We can align and use some HTML elements and attributes to the web page to attract users, which will be the growth of the companies and businesses. We will customize the web pages with user-friendly environments based on the business needs.
How to Create a Google Map in HTML?
We will call the Google map API on our web page using <script> tag. We can set the marker after adding the Google map to the HTML page mainly; it contains three steps. 1. We will create an HTML page first, 2. Then add the map with a marker. 3. finally, we will get the API key to authenticate the locations. We will create an HTML page with our predefined tags based on the customized prospectus and also align the style attributes in the page if they need using <div> element; we will segregate the contents with separate modules view in the websites.
Adding the map with a marker is the second level for creating the Google map on the web page. This section will describe how to load the maps in javascript API into the web pages, and also we will write our javascript functions that use the API to add the map with a marker for the web page. When we add the API in the script tag, the callback parameters will execute some conditions like initMap function after the script loads the map API. If we use async attributes in the web page script, the browser allows the API loads the web pages’ rest of the rendering page contents. In the Script tag Google map API URL, we will see the key parameter it contains the API key. We will not set any key for this section will generate the API key automatically, and then the callback parameter is called by using initMap function with parameters.
The initMap function will use for initializing and adds the map whenever we load the web pages by using the javascript function with script tags HTML tags. We will call some default methods in the function, like getElementById() is one of the functions in a javascript library to find the map location on the web page by segregating the <div> tag in HTML. In the Script function, we will create the map instance using a new operator like the same in the Java programming language, new google.maps.Map() is the syntax for creating Google map instances in the javascript functions.
We will use our predefined tag in HTML like <center>, side navigations for where we locate the map in the web pages; the map will coordinate the HTML page with the order like the first latitude and longitude. We will set the zoom options in minimum and maximum sizes and portrait and landscape navigations with the web pages. If the zoom property has set the value like 0 is the lowest part in the zoom section view, and it displays the whole map on a single page. We can set the higher values in the zoom property with the high-resolution image on web pages. We will set the position of the marker on the web page by using the position property.
We will get the API key in the third step when we create the map on the web page; the key will use to authenticate the map and javascript functions in our customized API key. Using the Google Cloud Platform console tool containing options for creating your API key.
Examples of HTML Google Maps
Below are the examples of HTML Google Maps:
Example #1
Code:
<html>
<body>
<div id="m" style="width:402px;height:433px;background:green"></div>
<script>
function sample() {
var m1 = {
center: new google.maps.LatLng(52.3, -0.14),
zoom: 13,
mapss: google.maps.MapTypeId.HYBRID
}
var m2 = new google.maps.Map(document.getElementById("m"), m1);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>Output:
Example #2
Code:
<html>
<head>
<style>
#m {
height: 403px;
width: 102%;
}
</style>
</head>
<body>
<div id="m"></div>
<script>
function initMap() {
var loc = {lat: -26.334, lng: 132.034};
var m1 = new google.maps.Map(
document.getElementById('m'), {zoom: 3, center: loc});
var mar = new google.maps.Marker({position: loc, map: m1});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>Output:
Example #3
Code:
<!DOCTYPE html>
<html>
<body>
<div id="m1" style="width:402px;height:303px;"></div>
<br>
<div id="m2" style="width:402px;height:303px;"></div>
<br>
<div id="m3" style="width:402px;height:303px;"></div>
<br>
<div id="m4" style="width:402px;height:303px;"></div>
<script>
function sample() {
var choice1 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.ROADMAP
};
var choice2 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.SATELLITE
};
var choice3 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.HYBRID
};
var choice4 = {
center: new google.maps.LatLng(51.503442,-0.120540),
zoom:7,
mapTypes: google.maps.MapTypeId.TERRAIN
};
var i = new google.maps.Map(document.getElementById("m1"),choice1);
var j = new google.maps.Map(document.getElementById("m2"),choice2);
var k = new google.maps.Map(document.getElementById("m3"),choice3);
var l = new google.maps.Map(document.getElementById("m4"),choice4);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=sample"></script>
</body>
</html>Output:
Above examples, we use Google Maps in three different styles with pre-defined HTML elements, attributes, and javascript functions to call the map API in the web pages.
Conclusion
Using the document’s map API to identify the location in the javascript function. It’s entirely based on the sensors. When we use the mobile in Google Maps, we will enable the location to only fetch the data from a source location to the destination direction. We also check whether the application accepts the sensor to detect the user location and checks browser compatibility issue Sensor parameter is not used for longer durations.
Recommended Articles
This is a guide to HTML Google Maps. Here we discuss how to create a Google Map in HTML and its examples with code implementation and output. You can also go through our other related articles to learn more –
