NEW

6/recent/ticker-posts

Header Ads Widget

HTML Google Maps

 

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:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>First Google Map Example</h1>  
  5. <div id="map">My map will go here...</div>  
  6. </body>  
  7. </html>  

Set the Map Size

You can set the map size by using the following syntax:

  1. <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.

  1. <script src="https://maps.googleapis.com/maps/api/js?callback=myMap"></script>   

Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <h1>My First Google Map</h1>  
  5. <div id="map" style="width:400px;height:400px;background:grey"></div>  
  6. <script>  
  7. function myMap() {  
  8. var mapOptions = {  
  9.     center: new google.maps.LatLng(51.5, -0.12),  
  10.     zoom: 10,  
  11.     mapTypeId: google.maps.MapTypeId.HYBRID  
  12. }  
  13. var map = new google.maps.Map(document.getElementById("map"), mapOptions);  
  14. }  
  15. </script>  
  16. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>  
  17. </body>  
  18. </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:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <body>  
  4. <div id="googleMap1" style="width:400px;height:300px;"></div>  
  5. <br>  
  6. <div id="googleMap2" style="width:400px;height:300px;"></div>  
  7. <br>  
  8. <div id="googleMap3" style="width:400px;height:300px;"></div>  
  9. <br>  
  10. <div id="googleMap4" style="width:400px;height:300px;"></div>  
  11. <script>  
  12. function myMap() {  
  13.   var mapOptions1 = {  
  14.     center: new google.maps.LatLng(51.508742,-0.120850),  
  15.     zoom:9,  
  16.     mapTypeId: google.maps.MapTypeId.ROADMAP  
  17.   };  
  18.   var mapOptions2 = {  
  19.     center: new google.maps.LatLng(51.508742,-0.120850),  
  20.     zoom:9,  
  21.     mapTypeId: google.maps.MapTypeId.SATELLITE  
  22.   };  
  23.   var mapOptions3 = {  
  24.     center: new google.maps.LatLng(51.508742,-0.120850),  
  25.     zoom:9,  
  26.     mapTypeId: google.maps.MapTypeId.HYBRID  
  27.   };  
  28.   var mapOptions4 = {  
  29.     center: new google.maps.LatLng(51.508742,-0.120850),  
  30.     zoom:9,  
  31.     mapTypeId: google.maps.MapTypeId.TERRAIN  
  32.   };  
  33.   var map1 = new google.maps.Map(document.getElementById("googleMap1"),mapOptions1);  
  34.   var map2 = new google.maps.Map(document.getElementById("googleMap2"),mapOptions2);  
  35.   var map3 = new google.maps.Map(document.getElementById("googleMap3"),mapOptions3);  
  36.   var map4 = new google.maps.Map(document.getElementById("googleMap4"),mapOptions4);  
  37. }  
  38. </script>  
  39. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU&callback=myMap"></script>  
  40. </body>  
  41. </html>  

Post a Comment

0 Comments

Recents Post

Exploring Paidwork - Your Gateway to Earning Online