Google Maps

Google Maps

This feature allows you to add a Google Map to your site.

Getting Started

  1. Make sure you are logged into the CMS
  2. Check out the page that you want the map to be on

Inserting some code

  1. View the source code of the page by clicking Source
  2. 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

  1. To add a location, review the following example
  2. [‘Name‘, Latitude, Longitude, ‘Color of Marker‘, ‘HTML for InfoBox‘],

  3. The characters in Bold are required for the structure of the program.
  4. 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
  5. Add as many locations as needed. On the last location, remove the comma after the ending bracket.
  6. Add the following code:

    ];
    var markers = new Array();
    $(document).ready(function(){initializeGoogleMaps(places, 9, markers);});
    </script>

  7. 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>

Adding HTML

  1. Find the location in the Source Code at which you would like to have the map.
  2. Insert the following HTML:

    <div id="googleMapContainer">Please turn on Javascript to see the map.</div>

Example

Please turn on Javascript to see the map.