Open Google map infowindow from another page

[computerbarry]

Hi all

Wondering if its possible to open a google map infowindow from another page.
Using the example fiddle below, this works well but the links are on the same page just below the map.

Is there a way to have static/random links spread around different pages that would/could link to the page with the map on and open the infowindow?

Example.

Think of a property website that lists houses, each house within the list has a location marker, and when clicked will be directed to the page with the map on and open the correct marker for that property.

Lets say for example:

map.html - is the page in the fiddle and holds the map
houses.html - is another page that has links to the map which wants to open the correct marker

Fiddle example

Is this possible?
Any examples or pseudo code on how this would work?
How would the links on houses link to map.html?

Something like:

map.html/marker14

Thanks, Barry

[m3g4p0p]

You might pass the marker ID in a query string, like map.html?marker=14, and then trigger a click event on the corrseponding marker just like in the fiddle:

const search = new URLSearchParams(location.search)
const markerId = search.get('marker')

if (markerId) {
  google.maps.event.trigger(markers[markerId], 'click')
}

However, this would of course require the marker IDs always to be in sync on both pages… maybe a more reliable variant would be to just pass the required information to create new marker, such as map.html?lat=1&lang=2&title=foo (or assign real IDs instead of just using array indices).

[computerbarry]

@m3g4p0p

You might pass the marker ID in a query string, like map.html?marker=14, and then trigger a click event on the corrseponding marker just like in the fiddle

Yes, this sounds just like how I need it

@m3g4p0p

However, this would of course require the marker IDs always to be in sync on both pages

In this instance, the ids/indexes will always be the same, the markers will come from the database with a unique id which in turn, will be assigned to each marker.

@m3g4p0p

(or assign real IDs instead of just using array indices)

I think that would work similar to the above. I’ll have to think a little more about the best approach for this.
My main issue was if it was possible, after what you have suggested m3g4p0p it seems like it is

Ok, the fiddle I used was a fork, I’m not a JS master
I’ll get to work on some drafts and get back in due time with my findings with any issues, which I’m sure I’ll have

The only issue was that with ?marker=14 for example this url is then exposed and could potentially be indexed, SEO etc. though not a major concern right now. Doubt it would cause any problems, might even benefit things.

Thanks, Barry

[m3g4p0p]

@computerbarry

the markers will come from the database with a unique id which in turn, will be assigned to each marker

Yes that would be ideal… so you don’t have to worry about the order (or maybe a location-specific subset) of the markers populated to the map page, backend caching, and indeed SEO (the IDs would always stay the same, whereas a given array index x might point to another location when the data got updated).