Map

Build your map

The complete page for your selection (the lines to add are highlighted):

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

Step by step

1. Inside the head tag, import two JavaScript files.
   Copy

   <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) Adjust the look of the pop-up bubbles by defining mapbubbletitle and mapbubble in your CSS.
   Copy

   .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. Add a div with an id where the map should appear. Note: its height and width must be set or the map will not appear. Percentages like width:80% are fine.
   Copy

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

4. Finally, call coolMap.showMap(displayId, zoom, divID) inside a script block.
   • displayId: the unique id of the display. (Use the picker above to find it.)
   • zoom: a number from 1 to 16 for how close to zoom in on the display.
   • divID: the id of the div from step 3.
   Copy

   coolMap.showMap( 2, 10, 'map');