Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Google API Google Map Supported Type And Simple Example

Google Map Supported Type And Simple Example

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

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>

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

Google Map - ROADMAP Type

Google Map - ROADMAP Type

View ROADMAP Type Demonstration

2. Google Map – SATELLITE Type

SATELLITE displays photographic tiles.

Google Map - SATELLITE Type

Google Map - SATELLITE Type

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

Google Map - HYBRID Type

Google Map - HYBRID Type

View HYBRID Type Demonstration

2. Google Map – TERRAIN Type

TERRAIN displays physical relief tiles for displaying elevation and water features (mountains, rivers, etc.).

Google Map - TERRAIN Type

Google Map - TERRAIN Type

View TERRAIN Type Demonstration

Apr 10, 2012Hoan Huynh

Demo page

iPhone 4s Cannot Get Mail imap.gmail.comWhich Browsers And Mobile Devices Support Geolocation API
You Might Also Like:
  • Display User Current Location On Google Map
  • How To Track Website With Multiple Google Analytisc Accounts
  • Create Pie Chart With HTML & JavaScript
  • Get Image Width Height With JQuery And JavaScript
  • All Google Service APIs
  • JavaScript Detect Protocol (HTTP/ HTTPS) To Load Or Handle Accordingly
  • Jquery checkbox checked
  • Javascript Problem Set focus textbox on Firefox
  • How To Tracking Click Event With Google Analytics
  • Google Adsense Showing AdChoices Instead Ads by Google
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

10 years ago Google APIGoogle Map, HYBRID, MapTypeId, ROADMAP, SATELLITE, TERRAIN296
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,451 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,832 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,650 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,985 views
C# Read Json From URL And Parse/Deserialize Json
11,712 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development