To get you started, this tutorial walks you though a minimal example that embeds a dynamic map with a marker in a web page. It looks like this:
Step by Step
To use the Google Maps API you need a Google Account
1: The first step is to obtain an API key. Go to the Google APIs Console and log in using your Google account.
The API key business is a bit involved but bear with me - you need it here and you'll go through the same process with other Google APIs.
Click Create Project and you will get a page listing loads of APIs. In the top left you should see a pull down marked API Project. Click this and then Rename.... Rename your project to something informative, such as Maps Project. That will help identify projects if you experiment with more than one of the Google APIs.
As of November 2013, Google is testing a new version of this interface called the Cloud Console. So the console may not look quite like this in the future.
2: Click the Services tab and scroll down to the Google Maps API v3 line. Move the switch to ON to activate this service.
Google does charge sites that issue more than 25,000 requests per day - we won't need to worry about that!
3: Pretend to read the Terms of Service page that comes up next and accept the terms. Seriously, if you want to use the API in a commercial application then you need to read the Terms.
You will be sent back the console with all the Services listed.
4: Click the API Access tab in the left side menu. We can use the Simple API Access here. Click Create new Browser key....
5: Specify the web site(s) that you want to use this key with. You want to specify these, otherwise someone else could use your key on their web site.
In my example I'm going to specify any site under the craic.com domain.
6: Google returns with the API Access console page now containing the generated Browser Key.
Because I set this up to only allow access from my sites, there is no problem making this key public.
7: Now we can work with Maps - finally...
Copy the code from the example into your web page and replace YOUR_API_KEY_GOES_HERE with your real API key. Don't surround it with quotes. Make the page available on your web site. You should see the map and be able to interact with it.
This needs to be hosted on a remote site in order to work
Understanding the Code
There are four parts to this block of code. The div with id map_canvas, and the style that goes with it, defines the container into which the map will be rendered.
The second script is what specifies our map. The initialize() function first defines an object that holds the coordinates and address of the location that we want to center the map on. You don't need this object but it is a convenient way to handle locations.
The Latitude and Longitude are used to define a google.maps.LatLng object.
The mapOptions object contains three attributes that define the map (there are many others available).
center defines the center of the map and zoom defines how much of the surrounding area is shown. Higher zoom levels produce maps that cover smaller areas of the Earth, as you would expect.
mapTypeId defines the type of map you want, which is a road map in this case.
Next the code creates a google.maps.Map object using the div element and mapOptions.
On to that map we want to place a google.maps.Marker at the desired location on our map and give it an address to use as a label. This example uses the default icon for the marker but you can specify your own images for these.
Finally the script runs the function when the page loads and the map is displayed.
This tutorial is a very simple example of what you can do with the API. I'll write more complex examples in due course, but to really understand the API you want to look at these resources from Google:
Code for this Tutorial
|1 :||tutorial_15_example_1.html||Live Demo 1|
Share this tutorial
1 : Embed a Google Map (Basic)
10 : Embed a Bing Map (Basic)
19 : Geolocation in HTML5 (Intermediate)
22 : Using Metadata from Photographs (Advanced)
24 : Geocoding with Google Maps (Intermediate)
40 : Display KML in a Google Map (Intermediate)
41 : Display GeoJSON in a Google Map (Intermediate)
42 : Google Street View Image API (Basic)
Comment on this Tutorial
comments powered by Disqus