Blog
Using Google Map API 3 For JavaScript (Beginner How-To And Example)
April 6, 2011
0

The Google MAP API version 3 offers improvements over the previous versions that makes it easier and more convenient to use. The one I like the most: you no longer need to obtain an API Key to use, very convenient.

 

You can read more about the changes and the API here: http://code.google.com/apis/maps/documentation/javascript/basics.html. This guide will show you how to set it up along with some examples.

 

We continue with an example to show you how easy this new API is to use.

Creating the Map object

The code below (which comes from the Google sample page loads the JavaScript library in the loadGoogleMapScript function.

function initialize() {
  var myLatlng = new google.maps.LatLng(0, 0);
  var myOptions = {
    zoom: 0,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_div"), myOptions);

}

function loadGoogleMapScript() {
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
  document.body.appendChild(script);
}

window.onload = loadGoogleMapScript;

The reason we are not doing the straightforward loading using <script src …> tag is so that we can be sure the html page has loaded before we start using the map. The map_div parameter is the div location where you want the map to appear.

 

Setting the sensor variable to false disables the sensor (sensor enables application to return the location of the user, set it to true if you are going to use it). Warning: you should not enable it unless you need it because it will display such warning on the browser:

Within the initializeGoogleMap function, we create the map object. Note that the myOptions contains the initialization values and there are more than used in the example which you can read at: http://code.google.com/apis/maps/documentation/javascript/reference.html#MapOptions. Creating the map with center set to latitude and langitude 0,0 and zoom value of 0 will display the world map.

The example is shown here:

Direct link to the example to see the source: https://www.permadi.com/tutorial/google-map-api-examples/initializing-google-map-api.html.
Since no API key is required, you can use the code as is, subject to Google Terms.

 

Next: Using Geolocation to Find A Location And Mark It On The Map