Want a custom version of the San Joaquin County School Map for your own county or district?

• Copyright notices & references to authors
  You must leave all copyright notices and references to authors in place.
• Follow all licensing restrictions for included components.
  You are responsible for following the licensing restrictions of included components. A list of the components and references to the original sources are included at the end of these instructions.
• Creating your own web page
  If you use this a basis for your own web page you please let me know about it.

• Download a copy of the site
  The files for the site are contained in a single zip file (79KB).
• Get a Google Maps API Key
  Using the Google Maps API requires a "key" specific to your web site address.
• Get your county/district data
  The information you'll need includes the district, school name, address, city, state, zip, phone number, latitude and longitude. You can get the information from Ed-Data (click County, choose the List of Districts report and select your county).

  Getting the basic information should be straight forward (copy & paste). Getting the latitude and longitude requires a bit more work. If you click the address link in the Ed-Data report you are taken to a Yahoo Maps page. The link in the Link to this Map contains the latitude and longitude (look for &lat= and &lon=). You can also get the information in a similar fashion from Google but you'd have to copy/paste or rekey the address. There are other sources online that will return a set of coordinates for an address.

• General web page customizations (index.htm)
  Areas needing customization are enclosed in html comments. The beginning comment is <!-- customize: [suggestions] --> where [suggestions] is a comment explaining what you might want to customize. The ending comment is <!-- end customize -->. You can easily search for these and edit the information indicated as you see fit.
  
  
  
• Install the Google Maps API Key (index.htm)
  Find the line in the index.htm containing file=api&v=2&key=XXXXX and replace XXXXX with your API key.
  
  
• Edit the district/site data (sites.js)
  Edit the sites.js file. This file contains a few global variables and code that creates the "objects" for the map. I'm afraid I didn't take the time to make it a seperate text or Excel file. The naming conventions in the code and comments referer to Groups and Sites not Districts and Schools. This is to keep the code generic so it can be used for other maps and still make sense.
  
  Edit the following variables:
  

  • gMapLatitude - latitude used to center the map when first opened
  • gMapLongitude - longitude used to center the map when first opened
  • gMapZoom - the zoom level of the map when first opened

  
  Groups must be numbered incrementally starting with zero (the number is also the position in a javascript array). The first parameter in a site is the group to which the site belongs. The groups also have a latitude and longitude but these are not currently used (right now they are set to the same latitude and longitude as the district office).
  
  
  
• Edit the format/layout (maps.css)
  Edit the maps.css file. This contains the majority of the formatting in the web page.
• Test your new page
  That's it. Now open the index.htm from your computer and test. Once you have everything the way you want it upload it to your server.

• Google Maps API
  The Google Maps API provides the maps, satellite images and driving directions.
• Save Settings (Cookie Scripts)
  The Cookie Scripts were originally written by Scott Andrew. They provide the mechanism to save the users settings.
• Help Window (Popup Box)
  The Popup Box created by Jim Silver provides the mechanism to display the Help information.
• Group & Site Map (aka Public Schools Map)
  The Public Schools Map was created by Rames Creel.

• 04/23/2007
  • index.htm - added customize comments
  • index.htm - cursor styles refered to hand when they should have referred to pointer
  • index.htm - fixed the Maps provided by Google link
  • maps.css - added styles date & file for change history
  • maps.js & sites.js - moved global variables from maps.js to sites.js