[Resolved] Polygon Shapes Onto Google Maps

[Author]

Posts

[umbertoZ]

Hi, I'm working with Toolset Maps. I would like to build a map like this:

hidden link

Where I only display a shape of each USA state and markers with link for each main town of the state.

I found this solution to Overlay Polygon Shapes Onto Google Maps:

hidden link

Can you help me to implement this solution with Toolset Maps and hide the Map under the shapes?

thanks

[Waqar]

Hi,

Thank you for contacting us and I'd be happy to assist.

The example link that you shared is not using Google Maps or its Polygon feature. Instead, it is using the HTML's standard "Image Maps":
hidden link

Here is a simple example of how an image and its map's code looks like:

<map name="Map">
    <area shape="circle" coords="x,y,r" href="#link" id="Title">
    <area shape="circle" coords="x,y,r" href="#link" id="Title">
    <area shape="circle" coords="x,y,r" href="#link" id="Title">
    <area shape="circle" coords="x,y,r" href="#link" id="Title">
    <area shape="circle" coords="x,y,r" href="#link" id="Title">
</map>
<img src="Image URL" height="500" usemap="#Map">

Using a Toolset view's loop, you can load the 'coords' attribute values for each "area" tag, from a custom field in a post, and for #link and "Title", you can use the post's URL and title, respectively.

For the "Image URL" you'll need to provide a static image for the US map with the state boundaries visible.

Alternatively, achieving something like this through the Polygon overlays on a Google Maps would be fairly complex. In that case, you can load the map markers for towns of the states using Toolset view and map and address type custom field, but for the polygon coordinates for the states, you'll be better off using the external file, as explained in the tutorial that you referenced.

I hope this helps and for more personalized assistance around custom code, you can consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar