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>