| Author |
Topic: Google Maps API Tutorial -- Quick Start |
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
 |
|
|
| Google Maps API Tutorial -- Quick Start |
How to start:
Step 1) Sign up for a Google Maps API key
Once it is done, the key should look like:
ABQIAAKLPDUET0Qt7v3VcSk6JNU1sBSM5jMcmVqUpI7aqV99cW1cHHCiThQYkcZUPRJn9vy_TWxWvuLbBfSGDw
|
|
|
|
|
|
|
WebSpider
member
offline  |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Step 2) Load Google Maps JavaScript API |
#
# Example using no sensor when loading the Maps JavaScript API with the key
#
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAKLPDUET0Qt7v3VcSk6JNU1sBSM5jMcmVqUpI7aqV99cW1cHHCiThQYkcZUPRJn9vy_TWxWvuLbBfSGDw&sensor=false">
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Step 3) Specify the location where the map resides |
At anywhere within <body></body>, type in:
<div id="map" style="width: 550px; height: 450px"></div>
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| Step 4) Display the map with the initial location |
<script type="text/javascript">
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419),8);
</script>
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| That's it. |
That's the all you need to display a google map in your website. Let's put those steps together.
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps</title>
<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=
ABQIAAKLPDUET0Qt7v3VcSk6JNU1sBSM5jMcmVqUpI7aqV99cW1cHHCiThQYkcZUPRJn9vy_TWxWvuLbBfSGDw"></script>
</head>
<body onunload="GUnload()">
Google map goes here:
<div id="map" style="width: 550px; height: 450px"></div>
<script type="text/javascript">
// Display the map, with the initial location
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 8);
</script>
</body>
</html>
|
|
|
|
|
|
|
WebSpider
member
offline |
| |
| posts: |
147 |
| joined: |
06/29/2006 |
| from: |
Seattle, WA |
|
|
|
|
|
| A slight variation |
<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script type="text/javascript" src="http://maps.google.com/maps?
file=api&v=2&sensor=false&key=
ABQIAAKLPDUET0Qt7v3VcSk6JNU1sBSM5jMcmVqUpI7aqV99cW1cHHCiThQYkcZUPRJn9vy_TWxWvuLbBfSGDw"
></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(37.4419, -122.1419), 8);
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map" style="width: 550px; height: 450px"></div>
</body>
</html>
|
|
|
|
|
|
|
Email To Friend | 
Set Alert To This Topic
New Topic | 
Post Reply 
posted on: 06/19/2009 08:51:06 PM
Edit
Quote
Report
Profile
Reply