This API will display a map centered on a specified display. It will also display any other nearby displays on the map as well. (Sample) NOTE: You will need to register for a Google Maps API Key.

What is needed:
  1. Inside the head tag, two javascript files need imported.
    <script type="text/javascript" src=""> </script>
    <script type="text/javascript" src=""></script>
  2. (Optional) The formatting of the pop-up bubbles can be adjusted by defining mapbubbletitle and mapbuble inside of a CSS definition.
    .mapbubbletitle {
      color: #006699;
      font-size: 13px;
    .mapbubble {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-size: 13px;
  3. Define a div with a particular id at the location you want to the map to appear. Note: It is important that that height and width be set otherwise the map will not appear. (Using percentages like width:80% is fine!).
    <div id ="map" style="width:800px; height:500px"></div>
  4. Finally, call coolMap.showMap(displayId, zoom, divID) inside a javascript block.
    • displayId: The unique id of the display. (Use the dropdown below to find it.)
    • zoom: A number between 1 and 16 that defines how close to zoom in on the selected display
    • divID: The ID of the div tag from step #2
    coolMap.showMap( 2, 10, 'map');

This tool can help you genereate the code for your display:

<script type="text/javascript" src=""> </script>
<script type="text/javascript" src=""> </script>
. . . Somewhere in the body of the website . . .

<div id ="map" style="width:800px; height:500px"></div>

<script type="text/javascript">
      coolMap.showMap(, , 'map');

. . . Remainder of the website . . .

Terms of Service