Map

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="https://maps.google.com/maps/api/js?key=YOUR_KEY_HERE&sensor=false"> </script>
    <script type="text/javascript" src="https://cooldisplays.net/maptools.php"></script>
  2. (Optional) The formatting of the pop-up bubbles can be adjusted by defining mapbubbletitle and mapbuble inside of a CSS definition.
    .mapbubbletitle {
      font-weight:bold;
      color: #006699;
      font-size: 13px;
    }
    .mapbubble {
      margin: 0px 0px 0px 0px;
      padding: 0px 0px 0px 0px;
      font-size: 13px;
      width:300px;
    }
    .mappicture{
      float:right;
      margin-right:10px;
    }
  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:


<html>
<head>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?key=YOUR_KEY_HERE&sensor=false"> </script>
<script type="text/javascript" src="https://cooldisplays.net/maptools.php"> </script>
</head>
<body>
. . . Somewhere in the body of the website . . .

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

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

. . . Remainder of the website . . .
</body>
</html>


Main Menu
Website Tools
Holidays

Terms of Service