Embedding a clickable county map in Confluence page

Alice July 21, 2017

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:

<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

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/no longer in use...

2 answers

1 accepted

1 vote
Answer accepted
AnnWorley
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
July 21, 2017

It sounds like you are describing an ImageMap of a map of Michigan. Please consider Scroll ImageMap. You can install it as a trial and see if it works for your use case before you buy it.

 

Alice July 21, 2017

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.

AnnWorley
Atlassian Team
Atlassian Team members are employees working across the company in a wide variety of roles.
July 21, 2017

You can also try the HTML macro. You can generate the ImageMap HTML by using a free utility like Easy ImageMap Generator.

Michelle Rau good
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
December 11, 2018

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/ 

Like jorn_hass likes this
0 votes
Steven F Behnke
Rising Star
Rising Star
Rising Stars are recognized for providing high-quality answers to other users. Rising Stars receive a certificate of achievement and are on the path to becoming Community Leaders.
July 21, 2017

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.

Suggest an answer

Log in or Sign up to answer
TAGS
AUG Leaders

Atlassian Community Events