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

google api


Step 1: Obtain a Unique API Key

If you were to download the source code that is provided with this article, you would find that it doesn’t work on your website. The reason is because Google requires all users to obtain a unique “API key” for each site that implements Google maps.

Never fear. It’s 100% free and takes about thirty seconds to sign up. First, visit Google’s sign up page and enter the url of your website. Don’t worry about adding a specific path. The root url will cover every page that is part of that domain. Agree to the terms and conditions and click “Generate API”.

That’s it! The page that you’ve been redirected to contains your unique key as well as a sample page – to serve as a crash course. Your key will look something like:

ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdWI5Odv

You’ll also find a script path that will look like:

<script src=”http://maps.google.com/maps?file=api&v=2ampkey=ABQIAAAAAq93o5nn5Q3TYaaSmVsHhR1DJfR2IAi0TSZmrrsgSOYoGgsxBSG2a3MNFcUDaRPk6tAEpdI5Odvw&#8221; type=”text/javascript”></script>
Yours will be different from mine because it will contain your own specific key value. Copy this and paste it into the head portion of your document.

how to use google map api


Google Maps

<link rel="stylesheet" href="style.css" type="text/css" media="all" title="" /

Loading Map

Now create a JavaScript file called map.js:
Copy code

function load () {
var map = document.getElementById(“map”);
if (GBrowserIsCompatible()) {
var gmap = new GMap2(map);
gmap.addControl( new GSmallMapControl() );
gmap.addControl( new GMapTypeControl()) ;
gmap.addControl( new GOverviewMapControl(new GSize(100,100)) );
gmap.setCenter( new GLatLng(54.7,-4), 5 );
} else {
alert(“Sorry, your browser cannot handle the true power of Google Maps”);
}
}
window.onload = load;
window.onunload = GUnload;