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!
