second step api google



Step 2: Setting Up Your HTML

For the sake of simplicity, we’ll create a bare bones layout. Add the following within the body element of your document.

  1. <div id=”myMap” style=”width: 600px; height: 400px;”></div>

Step 3: Javascript

Next, add the following to your Javascript file. Review it a bit and then continue on.

  1. $(function() { // when the document is ready to be manipulated.
  2.   if (GBrowserIsCompatible()) { // if the browser is compatible with Google Map’s
  3.     var map = document.getElementById(“myMap”); // Get div element
  4.     var m = new GMap2(map); // new instance of the GMap2 class and pass in our div location.
  5.     m.setCenter(new GLatLng(36.158887, -86.782056), 13); // pass in latitude, longitude, and zoom level.
  6.   }
  7. else {alert(“Your browser is not worthy.”);}
  8. });

To take this code line by line:

  • When the document is ready to be manipulated, run the code within.This is a jQuery syntax, but jQuery isn’t required in the least. You could also simply add an “onLoad()” attribute to your body element – though this is messy.
  • If the browser that the user is accessing the map from isn’t compatible with the API, then show an alert (see bottom). Otherwise, run the code within.
  • Create a variable called “map” and tell it to find the div that will contain the map.
  • Next, create a variable called “m” and make it equal to a new instance of the “GMap2″ class. Within the parenthesis, pass in the “map” variable that you just created previously
  • Finally, set a center point so that the map knows what to show. To do this, we create a new instance of the “GLatLng” class and pass in the latitude and longitude values. You can go here to grab the appropriate values. In my case, I’ve set the coordinates to my home town. After that, you can optionally input a zoom level – which I’ve set to the standard ’13′.

This code alone will give you a basic map that might be completely appropriate for your needs. However, if you’d like to also implement “zoom” and “map mode” features, read on.

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