For your page you may might simply need to use the map to link to specific sections on your page. This is more simple that what it looks and you can already achieve this with the Free version of the plugin.
Consider the map below. If you click the marker the page will scroll to a section further down on the page.
Zoom level changed to 1
This is done by adding a unique identifier to the section or header section of your page, so that you can reference it using anchor links. For example, the section below has the identifier my-section. If you’re using a page builder, you usually can add an id to any of your elements. The screenshot below is from the new WordPress block editor:
In addition to identifying the section or header, you might want to add this to the custom css of your site:
html { scroll-behavior: smooth; }The code above will make the page scroll smoothly. Learn more about this css rule.
If you have a fixed menu that might cover your content, you might want to add some extra css rules, so that the anchor point has some space before, when it’s targetted:
:target:before { margin-top:50px !important; content: "" !important; display: block !important; height: 50px !important; }(source)
Now when building the map, you can set the click action to ‘open new url’ and use the URL of your page with the hashtag identifying the section you want to jump to. In our case it would be:
https://interactivegeomaps.com/docs/jump-to-specific-page-section-on-click/#my-section
Example:
This section
This is where the page will scroll once the marker is clicked. See above how we added a unique identifier to the title header so that we could reference it on the URL used. The 3 steps to have this working are:
Add a unique identifier to your section
Add the custom css to make the page scroll smoothly (optional)
Use the full URL and the hashtag with the identifier on the URL to open.
And that’s it. No need to implement custom code to have this working.