Google Maps
Google Maps
This feature allows you to add a Google Map to your site.
Getting Started
- Make sure you are logged into the CMS
- Check out the page that you want the map to be on
Inserting some code
- View the source code of the page by clicking Source
- At the top of your page insert the following code
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script> <script type="text/javascript">
var places = [
['University of Washington Bothell', 47.75778016002534, -122.19023644924164, "uw", "<h3>The University of Washington Bothell </h3>"],
Adding some locations
- To add a location, review the following example
- The characters in Bold are required for the structure of the program.
- The characters in red have to be added replaced by the following:
- Name: The name of the location or location (ex: John Smith or UW Bothell) Specific Requirements: Must have single quotes wrapping it
- Latitude/ Longitude: convert an address at http://www.findlatitudeandlongitude.com/
Specific Requirements: No quotes wrapping it - Color of Marker: Available colors are red, blue, orange, green, yellow, and uw
Specific Requirements: Must have single quotes wrapping it - HTML for InfoBox: When clicking on a marker, an InfoBox will pop up. This box accepts HTML. (ex: <h3>John Smith</h3>)
Specific Requirements: Must have single quotes wrapping it
- Add as many locations as needed. On the last location, remove the comma after the ending bracket.
- Add the following code:
];
var markers = new Array();
$(document).ready(function(){initializeGoogleMaps(places, 9, markers);});
</script>
- Example:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script> <script type="text/javascript">
var places = [
//UW Bothell
['University of Washington Bothell', 47.75778016002534, -122.19023644924164, "uw", "<h3>The University of Washington Bothell </h3>"],
['Eliran Eretz-Kedosha 11', 48.006168,-122.202162, "blue", "<h3>Eliran Eretz-Kedosha</h3><strong>School:</strong> University of Washington Bothell<br /><strong>Graduation Date:</strong> 2011<br />"],['john jacob jingleheimer schmidt 11', 48.007168,-122.202162, "yellow", "<h3>John Jacob Jingleheimer Schmidt</h3><strong>School:</strong> University of Washington Bothell<br /><strong>His name = My Name:</strong> Yes<br />"]
];
var markers = new Array();
$(document).ready(function(){initializeGoogleMaps(places, 9, markers);});
</script>
[‘Name‘, Latitude, Longitude, ‘Color of Marker‘, ‘HTML for InfoBox‘],
Adding HTML
- Find the location in the Source Code at which you would like to have the map.
- Insert the following HTML:
<div id="googleMapContainer">Please turn on Javascript to see the map.</div>