There are 4 Google Map Types that we can specify: ROADMAP, SATELLITE, HYBRID and TERRAIN. And below is a simple example that displays Google Map with MapTypeId is ROADMAP on a web page. We can change the type with ROADMAP, SATELLITE, HYBRID and TERRAIN respectively on line 18 as below:
mapTypeId: google.maps.MapTypeId.ROADMAP |
Simple Example Implements Google Map In HTML
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100% } body { height: 100%; margin: 0; padding: 0 } #map_canvas { height: 100% } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"> </script> <script type="text/javascript"> function initialize() { var myOptions = { center: new google.maps.LatLng(-34.397, 150.644), zoom: 2, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); } </script> </head> <body onLoad="initialize()"> <div id="map_canvas" style="width:100%; height:100%"></div> </body> </html> |
1. Google Map – ROADMAP Type
ROADMAP displays the normal, default 2D tiles of Google Maps.
View ROADMAP Type Demonstration
2. Google Map – SATELLITE Type
SATELLITE displays photographic tiles.
View SATELLITE Type Demonstration
3. Google Map – HYBRID Type
HYBRID displays a mix of photographic tiles and a tile layer for prominent features (roads, city names).
View HYBRID Type Demonstration
2. Google Map – TERRAIN Type
TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).
View TERRAIN Type Demonstration