Embedding a clickable county map in Confluence page
Asked by Alice:

I'd like to embed a map of Michigan that includes an outline of each county, so that when a user clicks on the county, they are sent to a specific link.

I was thinking of trying to embed a Google Map interface and then adding a layer for counties later. I used code taken from the [Google tutorial:](https://developers.google.com/maps/documentation/javascript/adding-a-google-map)

```
<body>    <h3>My Google Maps Demo</h3>    <div id="map"></div>    <script>      function initMap() {        var uluru = {lat: -25.363, lng: 131.044};        var map = new google.maps.Map(document.getElementById('map'), {          zoom: 4,          center: uluru        });        var marker = new google.maps.Marker({          position: uluru,          map: map        });      }    </script>    <script async defer    src="https://maps.googleapis.com/maps/api/js?key=<my api key>I&callback=initMap">    </script>  </body>
```

But I'm struggling with that-- it doesn't appear on my page. I made sure that my API key is activated. The pre-existing page content gets shifted around as though the map was there, but it doesn't actually load:

![Capture.PNG](/t5/image/serverpage/image-id/3466iF30E1A0B305417D1/image-dimensions/686x171?v=v2 "Capture.PNG")

Is there a better way to do this other than using Google Maps? I know there are a few map macros, but they seem to be [out of date](https://community.atlassian.com/t5/Confluence-questions/Google-Maps-within-Confluence-4-0/qaq-p/38130)/no [longer in use](https://studio.plugins.atlassian.com/browse/GMAP?_ga=2.253802561.871219827.1500644826-1363072843.1499875407)...


Answers:
author: AnnWorley
body: It sounds like you are describing an ImageMap of a map of Michigan. Please consider [Scroll ImageMap](https://marketplace.atlassian.com/plugins/de.dl.confluence.plugin.imagemap.ImageMapPlugin/cloud/overview). You can install it as a trial and see if it works for your use case before you buy it.

comments: author: Alice
body: I would strongly prefer to use a free piece of software, if possible, since there are so many available. I can't really afford to pay for one.


author: AnnWorley
body: You can also try the [HTML macro](https://confluence.atlassian.com/doc/html-macro-38273085.html). You can generate the ImageMap HTML by using a free utility like [Easy ImageMap Generator](http://imagemap-generator.dariodomi.de/).


author: Michelle Rau HP
body: I used the imagemap + html technique and it worked well, thank you. The specific generator you mentioned is unfortunately a bitcoin mining site, however there are other free image generators that are not.

Since I don't want to upload the specific flowchart image I'm using to a site, here is a helpful tutorial I followed to create an image map without using an online service. [https://html.com/images/how-to-make-an-image-map/](https://html.com/images/how-to-make-an-image-map/?)


author: Steven F Behnke
body: Try removing the \<body\> tags. Never ever include \<head\> or \<body\> tags within the page content, you'll break the visuals on the page and you scripts won't execute.

You should also post any errors that log to your Browser Console.