Google Maps | Types
To customize the Google map, there are four types of maps provide.
- ROADMAP: This type of map shows the street view of the specific area. It is the default type map.
- SATELLITE: This type of map shows the satellite images of the specific area.
- HYBRID: This type of map shows the major streets of the specific area.
- TERRAIN: This type of map shows the terrain and vegetation.
Syntax:
var CustomOp= {
mapTypeId:google.maps.MapTypeId.ROADMAP | SATELLITE | HYBRID | TERRAIN
};
Example 1: ROADMAP
<!DOCTYPE html> <html> <head> <title> Google Maps | Types </title> <!-- Add Google map API source --> <script src = </script> <script> function GFG() { var CustomOp = { center:new google.maps.LatLng( 28.502212, 77.405603), zoom:17, mapTypeId:google.maps.MapTypeId.ROADMAP }; // Map object var map = new google.maps.Map( document.getElementById("DivID"), CustomOp ); } </script> </head> <!-- Function that execute when page load --><body onload = "GFG()"> <center> <h1 style="color:green"> zambiatek </h1> <h3>Google Maps</h3> <!-- Basic Container --> <div id = "DivID" style = "width:400px; height:300px;"> </div> </center> </body> </html> |
Output:
Example 2: SATELLITE
<!DOCTYPE html> <html> <head> <title> Google Maps | Types </title> <!-- Add Google map API source --> <script src = </script> <script> function GFG() { var CustomOp = { center:new google.maps.LatLng( 28.502212, 77.405603), zoom:17, mapTypeId:google.maps.MapTypeId.SATELLITE }; // Map object var map = new google.maps.Map( document.getElementById("DivID"), CustomOp ); } </script> </head> <!-- Function that execute when page load --><body onload = "GFG()"> <center> <h1 style="color:green"> zambiatek </h1> <h3>Google Maps</h3> <!-- Basic Container --> <div id = "DivID" style = "width:400px; height:300px;"> </div> </center> </body> </html> |
Output:
Example 3: HYBRID
<!DOCTYPE html> <html> <head> <title> Google Maps | Types </title> <!-- Add Google map API source --> <script src = </script> <script> function GFG() { var CustomOp = { center:new google.maps.LatLng( 28.502212, 77.405603), zoom:17, mapTypeId:google.maps.MapTypeId.HYBRID }; // Map object var map = new google.maps.Map( document.getElementById("DivID"), CustomOp ); } </script> </head> <!-- Function that execute when page load --><body onload = "GFG()"> <center> <h1 style="color:green"> zambiatek </h1> <h3>Google Maps</h3> <!-- Basic Container --> <div id = "DivID" style = "width:400px; height:300px;"> </div> </center> </body> </html> |
Output:
Example 4: TERRAIN
<!DOCTYPE html> <html> <head> <title> Google Maps | Types </title> <!-- Add Google map API source --> <script src = </script> <script> function GFG() { var CustomOp = { center:new google.maps.LatLng( 28.502212, 77.405603), zoom:17, mapTypeId:google.maps.MapTypeId.TERRAIN }; // Map object var map = new google.maps.Map( document.getElementById("DivID"), CustomOp ); } </script> </head> <!-- Function that execute when page load --><body onload = "GFG()"> <center> <h1 style="color:green"> zambiatek </h1> <h3>Google Maps</h3> <!-- Basic Container --> <div id = "DivID" style = "width:400px; height:300px;"> </div> </center> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, zambiatek Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
