Have you ever wanted to make a map in Google Maps? Maybe put your friends houses on a map and share it? Or maybe even add a map to your blog and let visitors type in their locations and then display the map of all your visitors? Well you can!
Google has always been very good about sharing their developments and their code, and this is no exception. Now I will admit that it can take some tinkering to get it just the way you want it. There’s no easy interface to use, it really is delving into the code and using their API.
Creating a basic map is pretty darn easy. Go to http://code.google.com/apis/maps/ and follow the instructions. First you have to register to get an API key, but it’s free and very useful. Once you’ve registered, I’d go to http://code.google.com/apis/maps/documentation/introduction.html and read the basic instructions. I’ll go over them here anyway in case you’re lazy ;-).
This first part goes inside the section of the webpage you want the map to be on.
<script src="http://maps.google.com/maps?file=api&v=2&key=acbdefg&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
//"map_canvas" is the ID of the DIV below
var map = new GMap2(document.getElementById("map_canvas"));
//must be sent before any other methods on the map; sets the Lat and Long and zoom level
map.setCenter(new GLatLng(37.71967, -97.29526), 13);
//sets default interface for map. Read the "Using the Default Maps UI" section in the Maps API Version 2 Development Guide
map.setUIToDefault();
}
}
</script>
This second part goes into the actual tag on the page.
<!-- onload will open the map when the page opens, and onunload will prevent memory leak with this API --> <body onload="initialize()" onunload="GUnload()"></body>
This third part goes between the tags of the web page.
<div id="map_canvas" style="width: 500px; height: 300px"></div> <div id="message"></div>
The whole code put together looks like the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Google Map API</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=abcdefg&sensor=false" type="text/javascript"></script>
<script type="text/javascript">
function initialize() {
if (GBrowserIsCompatible()) {
//"map_canvas" is the ID of the DIV below
var map = new GMap2(document.getElementById("map_canvas"));
//must be sent before any other methods on the map; sets the Lat and Long and zoom level
map.setCenter(new GLatLng(37.71967, -97.29526), 13);
//sets default interface for map. Read the "Using the Default Maps UI" section in the Maps API Version 2 Development Guide
map.setUIToDefault();
}
}
</script>
</head>
<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<div id="message"></div>
</body>
</html>
This will set up a new map for you. The API has MANY MANY MANY options so if you’re interested in this then I suggest you get acquainted with the manual since this is a very basic tutorial. I’m always interested to hear about what other developers are doing so give me some details in the comments!
