This tutorial for an interactive map does not require an extra plugin. On the other hand, you must have a basic understanding of Elementor, as well as Adobe Illustrator.
- Open Adobe Illustrator to an image or blank slate. I’m using a Google Map screenshot of Los Angeles for this example.
- Next I create my vector icons to represent the locations of Rabbit Rescues around the city.
- In Illustrator, under Windows, open Attributes.
- Select your vector and choose Rectangle or Polygon from the drop down menu and ad your link. Do this with every clickable element of your map.
- Once you are done, save your file as an SVG.
- Open your SVG in Adobe Dreamweaver (or the free text editor that come with Mac and PC). I am uploading the image without the vector graphics to my media folder in WordPress. I will now copy that link and locate where to place that in my code (at the top between the <image></image> tags).
- I’m also going to place target=”_blank” at the end of every hyperlink so that my links open in a new tab once selected.
- In WordPress start a new Post or Page and drop in the HTML Widget.
- Copy and paste all the SVG code from the text editor into the HTML Widget.
- Save and Preview to make sure it’s working.
That’s it! No extra plugins needed! And this is not to discourage using extra plugins with Elementor, but too many plugins can interfere with each other and slow the site down.
Also, if you find it’s not working for some reason, deactivate your plugins and refresh. I found one plugin in particular was generating and error and prventing my seeing the map. Hopefully you won’t run into any issues!
