HTML Google Maps
Web structure starts with solid HTML. Learn how HTML Google Maps contributes to accessible and semantic web pages in the tutorial below.
Utilizing HTML Google Map allows you to showcase maps on your website. It is straightforward to integrate a map into a simple HTML webpage.
Syntax:
<!DOCTYPE html>
<html>
<body>
<h1>First Google Map Example</h1>
<div id="map">My map will go here...</div>
</body>
</html>
Set the Map Size
To define the dimensions of the map, employ the subsequent syntax:
<div id="map" style="width:400px;height:400px;background:grey"></div>
How can a function be implemented to define the properties of a map?
A function can be used to establish the properties of a map. In this case, the function is named myMap. The following example demonstrates the centering of a Google map on London, England.
Utilize the capabilities of the Google Maps API through a JavaScript library hosted by Google. Employ the script below to make a reference to the Google Maps API while including a callback to the myMap function.
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
Example:
<!DOCTYPE html>
<html>
<body>
<h1>My First Google Map</h1>
<div id="map" style="width:400px;height:400px;background:grey"></div>
<script>
function myMap() {
var mapOptions = {
center: new google.maps.LatLng(51.5, -0.12),
zoom: 10,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
}
</script>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
</body>
</html>
Example Explanation
The variable mapOptions is responsible for specifying the attributes of the map.
Define the location for centering the map by providing latitude and longitude coordinates.
zoom: It indicates the level of zoom for the map (feel free to explore different zoom levels).
mapTypeId: It specifies the map type to display. The following map types are supported: ROADMAP, SATELLITE, HYBRID, and TERRAIN.
You can use different map types in a single example.
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
HTML Multiple Maps
Various map types can be utilized within a single example.
Example:
<!DOCTYPE html>
<html>
<body>
<div id="googleMap1" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap2" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap3" style="width:400px;height:300px;"></div>
<br>
<div id="googleMap4" style="width:400px;height:300px;"></div>
<script>
function myMap() {
var mapOptions1 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapOptions2 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var mapOptions3 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var mapOptions4 = {
center: new google.maps.LatLng(51.508742,-0.120850),
zoom:9,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
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);
}
</script>
<script src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image"></script>
</body>
</html>
