Skip Navigation

[Resolved] How to link a map marker to larger Google Map with same marker

This thread is resolved. Here is a description of the problem and solution.

Problem:
How to add a link to a map marker which will open up the same map in Google Maps itself (for a larger map) and still display a marker in the same location?

Solution:
Output the Types address field as part of a google URL in a format like so:

<a href='https://www.google.com/maps/place/[types field='street-address'][/types]'>View address on Google</a>

0% of people find this useful.

This support ticket is created 6 years, 5 months ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 7:00 – 14:00 -
- 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 15:00 – 16:00 -

Supporter timezone: Europe/London (GMT+00:00)

This topic contains 8 replies, has 2 voices.

Last updated by Sasank 6 years, 5 months ago.

Assisted by: Nigel.

Author
Posts
#953271

How to show a link in popup when marker is clicked with a link to "View larger map" ? I searched a lot but unable to find option to give user link to view the location on larger google map.

#953494

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

Where would you expect the users to see a larger map?

You could create a new View to show a larger map.

Say your first map is displaying "location" posts on a map.

Then your second View would need to also display locations on a map (where the settings are to display a larger map), but you would need to add a Query Filter to only show the location set by a URL parameter (e.g. 'locationid'). You would insert this View onto a page (e.g. "detailed map", which has a post ID of 123).

Then in your first map for the marker pop-up you would create a link to the detailed map page, adding a URL parameter for the locationid, something like

<a href="[wpv-post-url id='123']?locationid=[wpv-post-id]">View larger map</a>

See https://toolset.com/documentation/user-guides/passing-arguments-to-views/

#953498

Thanks for your reply Nigel. Sorry for confusion, I just want the link to open that location on google maps (maps.google.com) where they can have other options like direction etc....

#953646

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

You need to output the Google link with the lat and lon in a particular format, and you can use the format attribute in the types shortcode that outputs the address to achieve the required format.

So I added the following to my template for locations which use a "street-address" custom field:

<a href='<em><u>hidden link</u></em> field='street-address' format="@FIELD_LATITUDE,FIELD_LONGITUDE,15z"][/types]'>View on Google</a>
#953695

It opens the google map with those coordinates but dosnt place the marker!

#954420

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

You can use a slightly different URL with the unformatted address and Google is smart enough to figure it out:

<a href='<em><u>hidden link</u></em> field='street-address'][/types]'>View address on Google</a>
#954554

It didnt work but I guess I need to explore a bit more on google api side, I was thinking there must be something in toolset plugin to do it which is why I opened the ticket.

#954572

Nigel
Supporter

Languages: English (English ) Spanish (Español )

Timezone: Europe/London (GMT+00:00)

What is an example of the address that is saved for your address custom field?

I tried the above on my local test site and it worked as expected.

#955423

This format worked out for me

<a href="<em><u>hidden link</u></em> field='street-address' format='@FIELD_LATITUDE,FIELD_LONGITUDE'][/types]&z=16&t=m&hl=en-US&gl=US&q=[types field='company-branch-address'][/types]">View on google</a>