Google Maps Guide
General Information : API Key : What Do I Add? : Create Custom Tile Sets : Add Overlay To Map : Sidebar Control : Tile Cutter : ResourcesGeneral Information
This guide was developed by me while working at Missouri State University. They were kind enough to allow me to reveal it for public use. The guide has been modified to apply to www.brokenbytes.info.
Google Maps API uses Javascript for most things, however AJAX is required for more advanced features in Google Maps. I have yet to use any of the AJAX functionality provided in Google Maps.
Google allows us to use their satellite imagery, street information, and other things for our own maps. We can take this information and through their Google Maps API, add our own additional Maps, Overlays, Markers, etc this allows us to create a wonderful, rich, and interactive map.
Google Maps API Key
Google Maps uses an API key to uniquely identify each webpage using their maps. This API Key is linked with the domain, in our case, the API Key is unique to brokenbytes.info. This key must be included in each webpage that uses a map for it to work. The Google Maps API Key for brokenbytes.info is:
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script>
Getting your API Key
To get your own API key for your website you can sign up here.
Using the API Key
To put the API Key properly on your webpage all you have to do is add it like any other external javascript in head section of your webpage. Here is an example:
<!DOCTYPE html PUBLIC "-//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>Testing 1 2 3</title></head> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><body> <div id="map" style="margin-top: 20px; width: 800px; height: 800px"></div> </body> </html>
What should I add to my map?
Points of Interest (Markers)
If you would just like to add points of interest to your map, you will most likely be using markers. The class to use for this is the GMarker class. It is considered an Overlay so when you add it, you will be using map.addOverlay(marker). Here is an example of a map with Carrington Hall (of Missouri State University) marked with a marker. There are many things you can do with a marker. It is possible to add a bubble above the marker that shows up when you click it or even have a custom marker icon. More about markers and their features will be covered in the Markers Section of the Google Maps Documentation.
Polygons (Areas of Interest)
Polygons are kind of like markers, except they mark an area on the map. They are implemented using the GPolygon class in Google Maps. To find out more about the GPolygon class you can visit Polygon Section of the Google Maps Documentation
Overlays or Hierarchial Map?
To figure this out, you need to understand what these two things are. An overlay is a layer that goes on top of the Google Map. It will allow you to overlay areas, shade them, add outlines, etc. If you are famaliar with Photoshop, it is much like a layer there. It is always on the map unless an external sidebar turns it on and off. Overlays use the GTileOverlay class. Here is an example of a map with two custom overlays, a parking overlay and a building overlay. If you would like to be able to manipulate tile layers with a side menu that is not part of the Google Maps GUI, you should use overlays. A hierarchial map is pretty much the same as a collection of overlays, but you can turn them on and off within the the Google Map GUI. Here is an example of a map with Hierarchial maptype and with a parking map layer to turn on and off.
Creating a Custom Tile Set for Google Maps
What is a Tile Set?
Google Maps loads the map in sections and are commonly referred to as tiles. By default, these tiles are 256 pixels high and 256 pixels wide. Each square tile makes up a portion of the map and each zoom level has its own set of image tiles. When you go to a page that has a Google Map on it the tiles for the current zoom level are stitched together to form a seemless map. Since Google Maps is implemented this way we must cut our map or overlay into tiles so it will work properly with Google Maps.
For more information, see the Google Maps Documentation or the Resources section of this guide.
How do I make my own Tile Set?
These are the steps I used to create tiles at work, however the process may be slightly different for you. The map/overlays I was working with were in an Illustrator file so I used a smart object in Photoshop to preserve editing and manipulatin of the illustrator file from within Photoshop.
1) Locate the map's photoshop file.
2) Open the photoshop file contianing the map layer in Smart Object form.
3) Double click the icon in the corner of the Smart Object layer. This will bring up Adobe Illustrator.
4) Turn off the layers you do not want to show up in your map or overlay.
5) Control+S or Command+S to save the Illustrator Smart Object.
6) Close Illustrator.
7) Setup the Tile Cutter Script if it is not already setup. Click here if you don't know how or don't have it.
8) In Photoshop Click File>Scripts>Browse
9) At the bottom change the file type to JavaScript File (*.JS)
10) Locate your tile cutting script, select it, and click load.
11) Photoshop is now cutting the tiles for your overlay, wait for it to finish.
12) Your new layer tiles are in the location you specified in the Tile Cutter Script.
13) Now you are ready to add your layer to the map. The next step is adding your
hierarchial map or overlay.
Extra Reference Info
The Mapki Site has lots of information on how to setup the tile cutter script properly.
My Tile Cutter Settings:
- FilePath: C:/Users/mes1234/Documents/test/
- HighestZoomLevel: 18
- LowestZoomLevel: 12
- OrgX: 63136
- OrgY: 101839
- OrgZoomLevel: 18
- PixelWidth: 256
- PixelHeight: 256
Adding Your Custom Tiles As An Overlay To A Google Map
Overlays in Google Maps
Overlays are pretty easy to add to Google Maps. The basic idea is that you add a new GTileLayerOverlay that points to your cut images onto your Google Map. Below is example code for adding a new Overlay. You can either start from scratch or look at the completed example here.
Starting from Scratch
If you do not already have a normal Google Map as a base to add your overlays too, you need to start here.
1) First you need to create a new web page. You must have access to both the body of the document and the head area of the document.
<!DOCTYPE html PUBLIC "-//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> <title>Testing 1 2 3</title> </head> <body> </body> </html>
2) Now you need to add the Broken Bytes Google Maps API Key (or your sites key) to the head section of the new page. We will also add the container for the map into the body section of the page. This div will be where the map will show up on the page.
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script>
Now we have:
<!DOCTYPE html PUBLIC "-//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>Testing 1 2 3</title></head> <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><body> <div id="map" style="margin-top: 20px; width: 800px; height: 800px"></div> </body> </html>
3) Next, load the components used for all maps into our webpage. This will go inside the head (or in the body) in another set javascript tags below the API Key. Here we will also need to add the function to activate our Google Map once the page begins to load. To do this we place a couple of things inside the body tag of the page. Below is an example with comments that explain what each line of code is doing.
<script type="text/javascript">
//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* // }
}
//]]>
</script>
Now we have:
<!DOCTYPE html PUBLIC "-//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>Testing 1 2 3</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><script type="text/javascript">
//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
// *********************** USED FOR ALL OVERLAYS *********************** //
// Create the map
var map = new GMap2(document.getElementById("map"));
// Set the center location of the map (the center is set to Carrington Hall on Missouri State University campus in Springfield, MO)
map.setCenter(new GLatLng(37.198647, -93.278625), 15);
// Throw a couple of controls on the map
// Allows you to change zoom and move around the map
map.addControl(new GLargeMapControl());
// Add the map types control, default are Map, Satellite, Hybrid
map.addControl(new GMapTypeControl());
// Allows users to zoom with their mouse scroll wheel
map.enableScrollWheelZoom();
// Create Copyright
var copyright = new GCopyright (1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"©2008 Missouri State University");
// Create Copyright Collection to hold the copyright information
var copyrightCollection = new GCopyrightCollection("© Missouri State University");
// Add our copyright information to Collection
copyrightCollection.addCopyright(copyright);
// ********************************************************************* // }
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="margin-top: 20px; width: 800px; height: 800px"></div>
</html>
4) Since we have the basic map and copyright creation done, we can move on to adding a layer. Below is the code used to add a new layer to the map. This code goes below the code we last added to the web page. Comments explain what each line of code does.
<script type="text/javascript">
//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* //
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* // }
}
//]]>
</script>
Now we have:
<!DOCTYPE html PUBLIC "-//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>Testing 1 2 3</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><script type="text/javascript">
//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
// *********************** USED FOR ALL OVERLAYS *********************** //
// Create the map
var map = new GMap2(document.getElementById("map"));
// Set the center location of the map (the center is set to Carrington Hall on Missouri State University campus in Springfield, MO)
map.setCenter(new GLatLng(37.198647, -93.278625), 15);
// Throw a couple of controls on the map
// Allows you to change zoom and move around the map
map.addControl(new GLargeMapControl());
// Add the map types control, default are Map, Satellite, Hybrid
map.addControl(new GMapTypeControl());
// Allows users to zoom with their mouse scroll wheel
map.enableScrollWheelZoom();
// Create Copyright
var copyright = new GCopyright (1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"©2008 Missouri State University");
// Create Copyright Collection to hold the copyright information
var copyrightCollection = new GCopyrightCollection("© Missouri State University");
// Add our copyright information to Collection
copyrightCollection.addCopyright(copyright);
// ********************************************************************* //
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* //
}
}
//]]>
</script>
</head>
<body>
</body>
</html>
You have added the new overlay. If you would like to add another repeat the proccess in step 4. Below is an example of a page with 2 overlays.
Completed Example With 2 Overlays
<!DOCTYPE html PUBLIC "-//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>Base Map</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><script type="text/javascript">
//<![CDATA[
function load()
{
if (GBrowserIsCompatible())
{
// *********************** USED FOR ALL OVERLAYS *********************** //
// Create the map
var map = new GMap2(document.getElementById("map"));
// Set the center location of the map (the center is set to Carrington Hall on Missouri State University campus in Springfield, MO)
map.setCenter(new GLatLng(37.198647, -93.278625), 15);
// Throw a couple of controls on the map
// Allows you to change zoom and move around the map
map.addControl(new GLargeMapControl());
// Add the map types control, default are Map, Satellite, Hybrid
map.addControl(new GMapTypeControl());
// Allows users to zoom with their mouse scroll wheel
map.enableScrollWheelZoom();
// Create Copyright
var copyright = new GCopyright (1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"©2008 Missouri State University");
// Create Copyright Collection to hold the copyright information
var copyrightCollection = new GCopyrightCollection("© Missouri State University");
// Add our copyright information to Collection
copyrightCollection.addCopyright(copyright);
// ********************************************************************* //
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* //
// ************************* PARKING OVERLAY *************************** //
var parkingtilelayer = new GTileLayer(copyrightCollection, 12, 18);
parkingtilelayer.getTileUrl = function (tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/parking/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
parkingtilelayer.isPng = function() { return true; };
parkingtilelayer.getOpacity = function() { return 0.5; };
var parkingOverlay = new GTileLayerOverlay(parkingtilelayer);
map.addOverlay(parkingOverlay);
// ********************************************************************* //
}
}
//]]>
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="margin-top: 20px; width: 800px; height: 800px"></div>
</body>
</html>
Sidebar Map Control
General Information
To create side bar navigation to interact with your maps you need some additional JavaScript functions and a sidebar of course! Here is an example of side bar navigation.
Sidebar Navigation Creation
I will assume that you have already gone through how to create an overlay. I will start off with a base overlay of the buildings and then create sidebar navigation to control things. Here is the start code for the page with one base layer:
<!DOCTYPE html PUBLIC "-//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" xml:lang="en">
<head>
<title>Sidebar Example</title>
<noscript>To use Google Maps you must have Javascript enabled. This message is displaying because you either don't have Javascript support in your browser, or have it turned off. If it is turned off please turn it on in your browser configuration and then try again.
</noscript>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script></head>
<body onunload="GUnload()">
<div id="gmap" style="width: 557px; height: 500px"></div>
<div id="buildings"></div>
<hr />
<div id="overlays"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible())
{
// *********************** USED FOR ALL OVERLAYS *********************** //
// Create the map
var map = new GMap2(document.getElementById("map"));
// Set the center location of the map (the center is set to Carrington Hall on Missouri State University campus in Springfield, MO)
map.setCenter(new GLatLng(37.198647, -93.278625), 15);
// Throw a couple of controls on the map
// Allows you to change zoom and move around the map
map.addControl(new GLargeMapControl());
// Add the map types control, default are Map, Satellite, Hybrid
map.addControl(new GMapTypeControl());
// Allows users to zoom with their mouse scroll wheel
map.enableScrollWheelZoom();
// Create Copyright
var copyright = new GCopyright (1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"©2008 Missouri State University");
// Create Copyright Collection to hold the copyright information
var copyrightCollection = new GCopyrightCollection("© Missouri State University");
// Add our copyright information to Collection
copyrightCollection.addCopyright(copyright);
// ********************************************************************* //
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* //
}
//]]>
</script>
</body></html>
If you don't understand the previous code, go read Adding Your Custom Tiles As An Overlay To A Google Map. Now that we have a base map with our buildings on it we can add a parking lot layer to turn on and off via the sidebar. If you want additional layers to display all you have to do use another createOverlay(). The first arguement of this method is the name of the layer, the second arguement is the location of the tiles for the layer, and last is the opacity of the layer.
<!DOCTYPE html PUBLIC "-//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" xml:lang="en">
<head>
<title>Sidebar Example</title>
<noscript>To use Google Maps you must have Javascript enabled. This message is displaying because you either don't have Javascript support in your browser, or have it turned off. If it is turned off please turn it on in your browser configuration and then try again.
</noscript>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><style type="text/css">
/* Makes the layer labels associated with check boxes look like links */
label
{
color:#8C001E;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body onunload="GUnload()">
<div id="PageWrapper">
<div class="CenterWrapper">
<div class="ColumnTrpl">
<div id="gmap" style="width: 557px; height: 500px"></div>
</div>
<div class="ColumnSgl">
<div id="buildings"></div>
<hr />
<div id="overlays"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible())
{
// *********************** USED FOR ALL OVERLAYS *********************** //
// Create the map
var map = new GMap2(document.getElementById("map"));
// Set the center location of the map (the center is set to Carrington Hall on Missouri State University campus in Springfield, MO)
map.setCenter(new GLatLng(37.198647, -93.278625), 15);
// Throw a couple of controls on the map
// Allows you to change zoom and move around the map
map.addControl(new GLargeMapControl());
// Add the map types control, default are Map, Satellite, Hybrid
map.addControl(new GMapTypeControl());
// Allows users to zoom with their mouse scroll wheel
map.enableScrollWheelZoom();
// Create Copyright
var copyright = new GCopyright (1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"©2008 Missouri State University");
// Create Copyright Collection to hold the copyright information
var copyrightCollection = new GCopyrightCollection("© Missouri State University");
// Add our copyright information to Collection
copyrightCollection.addCopyright(copyright);
// ********************************************************************* //
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* //
// ************************** OVERLAY LINKS **************************** //
// Holds the overlay objects
var gOverlays = [];
// Holds the html for the list of overlays
var htmlOverlays = "<form>";
// Holds whether the layer is on or off
// 0 is off 1 is on
var oStatus = [];
function createOverlay(name, tileBase, opacity)
{
var linkId="overlay"+(gOverlays.length);
var tileLayer = new GTileLayer(copyrightCollection, 12, 18);
tileLayer.getTileUrl = function (tile, zoom) { return tileBase+zoom+"_"+tile.x+"_"+tile.y+".png"; };
tileLayer.isPng = function() { return true; };
tileLayer.getOpacity = function() { return opacity; };
var overlay = new GTileLayerOverlay(tileLayer);
oStatus.push(0);
gOverlays.push(overlay);
htmlOverlays += '<div id="div' + linkId + '">';
htmlOverlays += '<input type="checkbox" id="' + linkId + '" name="' + linkId + '" onClick=javascript:oClicked(' + (gOverlays.length - 1) + ') />';
htmlOverlays += '<label for="' + linkId + '">' + name + '</label><br><\/div>';
return overlay;
}
// Called when an overlay link is clicked
function oClicked(i) {
// Id of the div
var divId = "divoverlay" + i;
// Check the status of the overlay
if (oStatus == 0) {
// Add the overlay to the map
map.addOverlay(gOverlays[i]);
// Change the background color on the layers div (lets user know which layers are on)
document.getElementById(divId).style.background = "#F0EEE4";
// Set the layer status to on
oStatus[i] = 1;
} else if (oStatus == 1) {
// Remove the layer from the map
map.removeOverlay(gOverlays[i]);
// Set the background color back to show the layer as off
document.getElementById(divId).style.background = "#FFFFFF";
// Set the layer status to off
oStatus[i] = 0;
}
}
// Add a parking lot overlay
createOverlay("Parking Lots", "../tilesets/parking/", 0.5);
// Display the list of overlays to turn on and off
htmlOverlays += "</form>";
document.getElementById("overlays").innerHTML = htmlOverlays;
// ********************************************************************* //
}
//]]>
</script>
</div>
<div class="Clear MozClear"></div>
</div>
</div>
</body></html>
Now that we have a layer to turn on and off via the side navigation lets get some points (markers) going. Below is a completed code sample with markers activating from the sidebar. Just like the overlay section I made it so if all you want to do is add some additional markers you just need to use the function createMarker(). This function takes 4 arguements. The first argument is the lattitude you want the marker at. The second arguement is the longitude you want the marker at. The third arguement is the name of the marker. The fourth argument is the text in html form that you would like to appear below the name in the pop up bubble that come up over the marker when you click the link.
<!DOCTYPE html PUBLIC "-//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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.missouristate.edu/styles/global.css" type="text/css" media="all"/>
<link rel="stylesheet" href="http://www.missouristate.edu/styles/sgf.css" type="text/css" media="all"/>
<title>Sidebar Example</title>
<noscript>To use Google Maps you must have Javascript enabled. This message is displaying because you either don't have Javascript support in your browser, or have it turned off. If it is turned off please turn it on in your browser configuration and then try again.
</noscript>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><style type="text/css">
/* Makes the layer labels associated with check boxes look like links */
label
{
color:#8C001E;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body onunload="GUnload()">
<div id="gmap" style="width: 557px; height: 500px"></div>
<div id="buildings"></div>
<hr />
<div id="overlays"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible())
{
// *********************** USED FOR ALL OVERLAYS *********************** //
// Create the map
var map = new GMap2(document.getElementById("map"));
// Set the center location of the map (the center is set to Carrington Hall on Missouri State University campus in Springfield, MO)
map.setCenter(new GLatLng(37.198647, -93.278625), 15);
// Throw a couple of controls on the map
// Allows you to change zoom and move around the map
map.addControl(new GLargeMapControl());
// Add the map types control, default are Map, Satellite, Hybrid
map.addControl(new GMapTypeControl());
// Allows users to zoom with their mouse scroll wheel
map.enableScrollWheelZoom();
// Create Copyright
var copyright = new GCopyright (1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"©2008 Missouri State University");
// Create Copyright Collection to hold the copyright information
var copyrightCollection = new GCopyrightCollection("© Missouri State University");
// Add our copyright information to Collection
copyrightCollection.addCopyright(copyright);
// ********************************************************************* //
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* //
// ************************** BUILDING LINKS *************************** //
// Holds the markers
var gMarkers = [];
// Holds the last marker that was activated
var lastMarker = -1;
// This variable will collect the html which will eventually be placed in the buildings
var htmlBuildings = "";
// A function to create the marker and set up the event window
window.createMarker = function(lat,lng,name,html) {
// Creates a marker based off the passed lat and lng
var marker = new GMarker(new GLatLng(lat, lng));
// Index of the marker in gMarkers (used when creating the onClick event)
var linkId = "marker"+(gMarkers.length);
// Adds an even listener to the marker to display a bubble when the marker is clicked
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(name+"<br /><br />"+html);
});
// Save the info we need to use later for the buildings
gMarkers.push(marker);
// Add a line to the buildings html
htmlBuildings += '<div id="'+linkId+'"><a href="javascript:bClicked(' + (gMarkers.length-1) + ')">' + name + '<\/a><br><\/div>';
return marker;
}
// This function picks up the click and opens the corresponding info window
function bClicked(i) {
// Close anre remove the last marker
if (lastMarker)
{
map.removeOverlay(lastMarker);
}
// Add the marker to the map
map.addOverlay(gMarkers[i]);
// Trigger the click event of the marker (opens the markers info window)
GEvent.trigger(gMarkers[i], "click");
// Center the map on the new marker
map.setCenter(gMarkers[i].getLatLng(), map.getZoom() );
// Set this marker as the last marker
lastMarker = gMarkers[i];
}
// Add Carrington Hall
createMarker(37.198647, -93.278625, "Carrington Hall", "Carrington Hall desc");
// Add Cheek Hall
createMarker(37.199278901, -93.2768118, "Cheek Hall", "The home of the real men.");
// Add Junita K
createMarker(37.202116, -93.28328132, "Juanita", "Singing and stuffz.");
// Put the assembled htmlBuildings contents into the buildings div
document.getElementById("buildings").innerHTML = htmlBuildings;
// ********************************************************************* //
// ************************** OVERLAY LINKS **************************** //
// Holds the overlay objects
var gOverlays = [];
// Holds the html for the list of overlays
var htmlOverlays = "<form>";
// Holds whether the layer is on or off
// 0 is off 1 is on
var oStatus = [];
function createOverlay(name, tileBase, opacity)
{
var linkId="overlay"+(gOverlays.length);
var tileLayer = new GTileLayer(copyrightCollection, 12, 18);
tileLayer.getTileUrl = function (tile, zoom) { return tileBase+zoom+"_"+tile.x+"_"+tile.y+".png"; };
tileLayer.isPng = function() { return true; };
tileLayer.getOpacity = function() { return opacity; };
var overlay = new GTileLayerOverlay(tileLayer);
oStatus.push(0);
gOverlays.push(overlay);
htmlOverlays += '<div id="div' + linkId + '">';
htmlOverlays += '<input type="checkbox" id="' + linkId + '" name="' + linkId + '" onClick=javascript:oClicked(' + (gOverlays.length - 1) + ') />';
htmlOverlays += '<label for="' + linkId + '">' + name + '</label><br><\/div>';
return overlay;
}
// Called when an overlay link is clicked
function oClicked(i) {
// Id of the div
var divId = "divoverlay" + i;
// Check the status of the overlay
if (oStatus == 0) {
// Add the overlay to the map
map.addOverlay(gOverlays[i]);
// Change the background color on the layers div (lets user know which layers are on)
document.getElementById(divId).style.background = "#F0EEE4";
// Set the layer status to on
oStatus[i] = 1;
} else if (oStatus == 1) {
// Remove the layer from the map
map.removeOverlay(gOverlays[i]);
// Set the background color back to show the layer as off
document.getElementById(divId).style.background = "#FFFFFF";
// Set the layer status to off
oStatus[i] = 0;
}
}
// Add a parking lot overlay
createOverlay("Parking Lots", "../tilesets/parking/", 0.5);
// Display the list of overlays to turn on and off
htmlOverlays += "</form>";
document.getElementById("overlays").innerHTML = htmlOverlays;
// ********************************************************************* // }
//]]>
</script>
</div>
</body></html>
Completed Sidebar Navigation with Markers and a Layer
<!DOCTYPE html PUBLIC "-//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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="http://www.missouristate.edu/styles/global.css" type="text/css" media="all"/>
<link rel="stylesheet" href="http://www.missouristate.edu/styles/sgf.css" type="text/css" media="all"/>
<title>Sidebar Example</title>
<noscript>To use Google Maps you must have Javascript enabled. This message is displaying because you either don't have Javascript support in your browser, or have it turned off. If it is turned off please turn it on in your browser configuration and then try again.
</noscript>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAjKXmtai3ngoJd2KGLsjwIxS-uA11UKpzECVMuluekZbTaZS6WhQAoytGw_eFTahBcDdWg8AiU4C3rg&sensor=false" type="text/javascript"></script><style type="text/css">
/* Makes the layer labels associated with check boxes look like links */
label
{
color:#8C001E;
text-decoration: underline;
cursor: pointer;
}
</style>
</head>
<body onunload="GUnload()">
<div id="gmap" style="width: 557px; height: 500px"></div>
<div id="buildings"></div>
<hr />
<div id="overlays"></div>
<script type="text/javascript">
//<![CDATA[
if (GBrowserIsCompatible())
{
// *********************** USED FOR ALL OVERLAYS *********************** //
// Create the map
var map = new GMap2(document.getElementById("map"));
// Set the center location of the map (the center is set to Carrington Hall on Missouri State University campus in Springfield, MO)
map.setCenter(new GLatLng(37.198647, -93.278625), 15);
// Throw a couple of controls on the map
// Allows you to change zoom and move around the map
map.addControl(new GLargeMapControl());
// Add the map types control, default are Map, Satellite, Hybrid
map.addControl(new GMapTypeControl());
// Allows users to zoom with their mouse scroll wheel
map.enableScrollWheelZoom();
// Create Copyright
var copyright = new GCopyright (1,
new GLatLngBounds(new GLatLng(-90, -180),
new GLatLng(90, 180)),
0,
"©2008 Missouri State University");
// Create Copyright Collection to hold the copyright information
var copyrightCollection = new GCopyrightCollection("© Missouri State University");
// Add our copyright information to Collection
copyrightCollection.addCopyright(copyright);
// ********************************************************************* //
// *************************** BASE OVERLAY **************************** //
// Create a GTileLayer for the base building overlay
// The 12 and 18 are the zoom level restrictions the tile layer will show up on
// The copyrightCollection is the copyright information to display for this layer
var basetilelayer = new GTileLayer(copyrightCollection, 12, 18);
// Make a custom tile URL for the map for Overlay
// This URL should point to the location containing your tiles that you cut earlier
basetilelayer.getTileUrl = function(tile, zoom) { return "http://www.brokenbytes.info/tuts/documentation/tilesets/baselayer/"+zoom+"_"+tile.x+"_"+tile.y+".png"; };
// Specify you are using png tile images for Overlay (without png there would not be any transparency in the image)
basetilelayer.isPng = function() { return true; };
// Set the opacity of the overlay (Range: 0-1, 1 being no opacity, 0 being see through)
basetilelayer.getOpacity = function() { return 0.8; };
// Create a new Overlay Tile Layer Object to contain the Overlay we have been making
var baseOverlay = new GTileLayerOverlay(basetilelayer);
// Add the baseOverlay (GTileLayerOverlay) we created in the last line to the google map
map.addOverlay(baseOverlay);
// ********************************************************************* //
// ************************** BUILDING LINKS *************************** //
// Holds the markers
var gMarkers = [];
// Holds the last marker that was activated
var lastMarker = -1;
// This variable will collect the html which will eventually be placed in the buildings
var htmlBuildings = "";
// A function to create the marker and set up the event window
window.createMarker = function(lat,lng,name,html) {
// Creates a marker based off the passed lat and lng
var marker = new GMarker(new GLatLng(lat, lng));
// Index of the marker in gMarkers (used when creating the onClick event)
var linkId = "marker"+(gMarkers.length);
// Adds an even listener to the marker to display a bubble when the marker is clicked
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(name+"<br /><br />"+html);
});
// Save the info we need to use later for the buildings
gMarkers.push(marker);
// Add a line to the buildings html
htmlBuildings += '<div id="'+linkId+'"><a href="javascript:bClicked(' + (gMarkers.length-1) + ')">' + name + '<\/a><br><\/div>';
return marker;
}
// This function picks up the click and opens the corresponding info window
function bClicked(i) {
// Close anre remove the last marker
if (lastMarker)
{
map.removeOverlay(lastMarker);
}
// Add the marker to the map
map.addOverlay(gMarkers[i]);
// Trigger the click event of the marker (opens the markers info window)
GEvent.trigger(gMarkers[i], "click");
// Center the map on the new marker
map.setCenter(gMarkers[i].getLatLng(), map.getZoom() );
// Set this marker as the last marker
lastMarker = gMarkers[i];
}
// Add Carrington Hall
createMarker(37.198647, -93.278625, "Carrington Hall", "Carrington Hall desc");
// Add Cheek Hall
createMarker(37.199278901, -93.2768118, "Cheek Hall", "The home of the real men.");
// Add Junita K
createMarker(37.202116, -93.28328132, "Juanita", "Singing and stuffz.");
// Put the assembled htmlBuildings contents into the buildings div
document.getElementById("buildings").innerHTML = htmlBuildings;
// ********************************************************************* //
// ************************** OVERLAY LINKS **************************** //
// Holds the overlay objects
var gOverlays = [];
// Holds the html for the list of overlays
var htmlOverlays = "<form>";
// Holds whether the layer is on or off
// 0 is off 1 is on
var oStatus = [];
function createOverlay(name, tileBase, opacity)
{
var linkId="overlay"+(gOverlays.length);
var tileLayer = new GTileLayer(copyrightCollection, 12, 18);
tileLayer.getTileUrl = function (tile, zoom) { return tileBase+zoom+"_"+tile.x+"_"+tile.y+".png"; };
tileLayer.isPng = function() { return true; };
tileLayer.getOpacity = function() { return opacity; };
var overlay = new GTileLayerOverlay(tileLayer);
oStatus.push(0);
gOverlays.push(overlay);
htmlOverlays += '<div id="div' + linkId + '">';
htmlOverlays += '<input type="checkbox" id="' + linkId + '" name="' + linkId + '" onClick=javascript:oClicked(' + (gOverlays.length - 1) + ') />';
htmlOverlays += '<label for="' + linkId + '">' + name + '</label><br><\/div>';
return overlay;
}
// Called when an overlay link is clicked
function oClicked(i) {
// Id of the div
var divId = "divoverlay" + i;
// Check the status of the overlay
if (oStatus == 0) {
// Add the overlay to the map
map.addOverlay(gOverlays[i]);
// Change the background color on the layers div (lets user know which layers are on)
document.getElementById(divId).style.background = "#F0EEE4";
// Set the layer status to on
oStatus[i] = 1;
} else if (oStatus == 1) {
// Remove the layer from the map
map.removeOverlay(gOverlays[i]);
// Set the background color back to show the layer as off
document.getElementById(divId).style.background = "#FFFFFF";
// Set the layer status to off
oStatus[i] = 0;
}
}
// Add a parking lot overlay
createOverlay("Parking Lots", "../tilesets/parking/", 0.5);
// Display the list of overlays to turn on and off
htmlOverlays += "</form>";
document.getElementById("overlays").innerHTML = htmlOverlays;
// ********************************************************************* // }
//]]>
</script>
</div>
</body></html>
Tile Cutter Script
Why do we need to Tile Cut our map image?
Instead of manually dividing our image into 256 x 256 tiles for each zoom level, we use a tile cutting script (described in the next section). It is javascript that cuts and saves the pictures in a folder, we are able to switch between different formats in the scripts settings area. I personally use png. The reason for using png is to maintain the transparency in the images. This makes it so there are not large white spaces overlaying the actual Google Map.
Getting the Tile Cutter Script
The tile cutter script should be available on the local servers. However, if it is lost or you don't know where to find it you can get the original and modify it. The original is available here. The tile script modified for creating the map at the time of writing this is available here.
Tile Cutter Settings
To save the tiles properly you will need to setup the directory to save them into inside the script. There are also a couple of other things you should verify. If these values are not correct, change them to what is listed.
1) Verify HighestZoomLevel = 18
2) Veryify LowestZoomLevel = 12
3) Change FolderPath to your corresponding folder path. This is where the Tiles will save. Example: FolderPath = "C:/Users/mrs1122/Documents/test/"
4) Verify OrgX = 63136
5) Verify OrgY = 101839
6) Verify OrgZoomLevel = 18
7) Verify PixelWidth = 256
8) Verify PixelHeight = 256
Resources:
- Google Maps API
- Google Maps Google Group
- Google Maps API Tutorial - Mike Williams
- Google Mapki
- Sidebar
- Clickable Items
- Map Coordinates on Click
- WyriHaximus.net Custom Map Tutorial
- Object Literals
- Unix command-line Tile Cutter
- Tooltip at cursor with custom Polygon Class
- Easy Custom Icons
- Custom Icon Shadow Maker
- Load Time Tester
- IntelliSense for Google Maps API in Visual Studio 2008
- Our Stuff: