Posted: December 28, 2012 in google
Tags:

 

How to create simple map using google map javascript api v3

Start to create google maps using api

Simple way to start develop the Google Maps API is to see a simple example.people familiar with JavaScript programming and object-oriented programming concepts can easily capture

<html>
  <head>

    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map_canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script>
      var map;
      function initialize() {
        var mapOptions = {
          zoom: 8,
          center: new google.maps.LatLng(8.560058,76.881108),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            mapOptions);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map_canvas"></div>
  </body>
</html>

Declared our applications as HTML5 using the simple HTML5 DOCTYPE

<!DOCTYPE html>

Loading the Google Maps API script

 <script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

Initialize the google map on window.onload to show map on our page

 function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(8.560058,76.881108),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}

function loadScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=TRUE_OR_FALSE&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadScript;

Setting the map options

var mapOptions = {
  center: new google.maps.LatLng(8.560058,76.881108),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
};
    • center

center the map on a specific point, we create a LatLng object to hold this location by passing the location’s coordinates in the order { latitude, longitude }:

center: new google.maps.LatLng(8.560058,76.881108),
    • Zoom Levels

The initial resolution at which to display the map is set by the zoom property, where zoom 0 corresponds to a map of the Earth fully zoomed out, and higher zoom levels zoom in at a higher resolution.

zoom: 8
    • Map Types

The following map types are supported:.

      • ROADMAP displays the normal, default 2D tiles of Google

        Maps.

      • SATELLITE displays photographic tiles.
      • HYBRID displays a mix of photographic tiles and a tile layer

        for prominent features (roads, city names).

      • TERRAIN displays physical relief tiles for displaying

        elevation and water features (mountains, rivers, etc.).

mapTypeId: google.maps.MapTypeId.ROADMAP

Create map object

var map = new google.maps.Map(document.getElementById("map_canvas"),
    mapOptions);

Loading Google Map

 <body onload="initialize()">

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s