Google Maps API Basic
A number of maps on this site were produced using Google Maps API, which is a free mapping service that lets a person produce and place a map on their website. Google has the entire United States mapped and most of the United States available from a satellite view. People browsing a map created using the Google map API can zoom in and out, can pan in any direction, and can switch between map, satellite, and a hybrid view. The level of complexity to create a map and post it on a website ranges from moderate to advanced, depending on the features used on the map. People producing Google maps can define the location the map shows, as well as the size of the map. Specific places can be marked on the map with a pushpin and those places can be described, and lines can even be drawn on the map.

To produce and use a Google map, you need the following:
  1. A website and a way to upload files to the website.

  3. A text editor to create an html file (the language that produces a web page). (Note that MS Word is NOT a text editor. TextWrangler for Mac is a text editor, as is EditPad Lite for Windows and Linux.)

  5. A Google Map API key.

  7. A geocode for the location of the center of your map.
Directions for creating and posting a Google Maps on a website follow:
  1. If you do not have one, sign-up for a Google account.

  3. Go to the Google Maps API website.

  5. Follow the instructions to get a Google Maps API key. (You need a key to create and post a map on a website. You cannot copy code and post the map to your website using someone else's key as each key is specifically tied to a website directory. (e.g. A map posted in the http://www.mygooglemapssite.com/mysite/ directory needs a key, and a map posted in http://www.mygooglemapssite.com/secondsite/ needs another key.)) and use another key. If you use someone else's key in the html code for a map posted on your website directory, the map will not work.

  7. The maps use geocodes, which are points defined by longitude (from pole to pole), and latitude (across the globe like the equator). When using geocodes use the following format (longitude, latitude). As an example, the location of the Girard Coalition, Inc. offices at 704 W. Girard Avenue in Philadelphia, PA can be geocoded by using
    (-75.1485013961792, 39.97034523140161) (The numbers can be shortened to about 4 numbers to the right of decimal point without having a significant impact on the location.) To get the longitude and latitude coordinates for geocoding a property, go to geocoder.us and type in an address.

  9. To create a basic map, copy the following code into a text editor and change the following:

    • Title, by replacing "Girard Avenue, Philadelphia, PA" with the title of your map.

    • Change the key code from ABQIAAAAZuSos8a-3EijAKXRAzcUahTuXgY4RPG1qjGNUKUfL8m6GxiX6hSp MU3gvRPRE2zVjTY41DZNj4b_sg to your own Google Maps API key code. Remember to end with a quotation mark ("). Do not add returns, but enter the key code in one line.

    • Replace the (-75.166569, 39.972516) after map.centerAndZoom(new GPoint with your own geocode for a location in the center of the area you want the map to include. (See #4 above.)

    • If you want to, change the width and the height numbers, which set the screen size of the page. Note that the width and height should generally not exceed 800.

    • Do not change any other code, and make sure that you do not delete any code such as quotations marks by mistake.

    Basic Map Code
    The code below produces the following map.

    Map

    (You can go to: http://www.girardcoalition.org/mapb.html to see the map, and go to "view", "source" from the menu to see the same code as below, which you can then copy and modify in a text editor.)

    Map
  10. Save the file with an htm or html extension (e.g. map.html), and upload the file to the web server to the same directory that you used when you got your Google Maps API key.

  12. Go to the web address of the map file in a web browser and see if it works.
Updated 11.21.05