Google Maps v3 API example

Google Maps v3 API came out while back, and they have some new features – the most important being no more API key!

You need 5 things for a simple HelloWorld:

  • Include the API:
    • <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  • Declare a CSS style-sheet with style info about your map (don’t forget this step otherwise your map will have zero height and with and will not appear!)
    • <link type="text/css" rel="stylesheet" href="/css/styles.css"/>
    • Content: #map {
      width: 500px;
      height: 400px;
      border: 1px solid black;
      }
  • Initialize the map
    • <script type="text/javascript">
      function initialize() {
      var myLatlng = new google.maps.LatLng(-34.397, 150.644);
      var myOptions = {
      zoom: 8,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map"), myOptions);
      }
      </script>
  • Create the map div somewhere
    • <div id="map"></div>
  • Initialize the map
    • If you have access to <body>:
      • <body onLoad="initialize()">
    • If no access to <body>:
      • <script type="text/javascript">initialize();</script>
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