HTML Google Maps
HTML Google Map is used to display maps on your webpage. You can simply add a map on your basic HTML page.
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
You can set the map size by using the following syntax:
- <div id="map" style="width:400px;height:400px;background:grey"></div>
How to create a function to set the map properties?
You can set the map properties by creating a function. Here, the function is myMap(). This example shows the Google map centered in London, England.
We have to use the functionalities of Google Maps API provided by a JavaScript library located at Google. Use the following script to refer to the Google Maps API with a callback to the myMap function.
- <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></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://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
- </body>
- </html>
Example Explanation
mapOptions: It is a variable which defines the properties for the map.
center: It specifies where to center the map (using latitude and longitude coordinates).
zoom: It specifies the zoom level for the map (try to experiment with the zoom level).
mapTypeId: It specifies the map type to display. The following map types are supported: ROADMAP, SATELLITE, HYBRID, and TERRAIN.
var map=new google.maps.Map(document.getElementById("map"), mapOptions): It creates a new map inside the
element with id="map", using the parameters that are passed (mapOptions).
HTML Multiple Maps
You can use different map types in 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://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>
- </body>
- </html>
.jpeg)
.jpeg)
0 Comments