create google map using javascript api v3


About Google Maps

Google Maps is a Google service offering powerful, user-friendly mapping technology and local business information -- including business locations, contact information, and driving directions. With Google Maps, you'll enjoy the following unique features:

    Integrated business search results - Find business locations and contact information all in one location, integrated on the map. For example, if you search for [ pizza in San Jose, CA ], locations of relevant listings and phone numbers appear on the map. You can also view additional information like hours of operation, types of payment accepted, and reviews.
    Draggable maps - Click and drag maps to view adjacent sections instantly (no long waits for new areas to download).
    Satellite imagery - View a satellite image (or a satellite image with superimposed map data) of your desired location that you can zoom and pan.
    Earth view - Click the Earth button to view 3D imagery and terrain from Google Earth on Maps that you can zoom, pan, and tilt.
    Street View - View and navigate within street-level imagery.
    Detailed directions - Enter an address and let Google Maps plot the location and driving directions for you. Plan a trip by adding multiple destinations to your route, and click and drag the route to customize it. Learn more about Google Maps driving directions.
    Keyboard shortcuts - Pan left, right, up and down with the arrow keys. Pan wider with the Page Up, Page Down, Home and End keys. Zoom in and out with the plus (+) and minus (-) keys.
    Double-click to zoom functionality - Double left-click to zoom in, and double right-click to zoom out (Ctrl+ double-click for Mac users).
    Scroll wheel zooming - Use the scroll wheel on your mouse to zoom in and out of the maps.
   
    Just copy the below code and save that file .html and open it in any browser...

<!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="https://maps.googleapis.com/maps/api/js?key=AIzaSyBICyE5vXPYapUl-rHcMP_L16QsvDIpzaE&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>