Google Maps: Insert URL Parameters into embed code html

  • 9 November 2017
  • 3 replies
  • 136 views
C

Hi

Really simple request.

I have Google Map embed code within a custom html box. So,

<div id=map><iframe width="600" height="450" frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?q=M45-7SG&key=myAPIkeyishere" allowfullscreen></iframe></div>

My landing page url features the zip code. For example,https://carehomes.fshc.co.uk/care-homes-dementia/?location=Whitefield&home=Regency&phone=0161-8851701&postcode=M45-7SG&BUN=Plr

Question: How to dynamically insert the postcode=M45-7SG from the URL into the Maps embed code and show the correct location.

Come on community, what’s the solution?

Many thanks, 🙂

3 replies

C

Any thoughts @Rob?

Rob
Userlevel 6

HI @Carl_Duncker what you’re looking to do can most likely be achieved using the Google Maps API. It would take some more custom code in order to grab the value of the postal code field and use it to search the map.

You may not even need the api, as you could try using javascript to dynamically insert the value into the iframe. You’d still need some code to do that though. So you could store the value of the postal code field after some event (perhaps on change and then insert is into the map with JS using that variable. So in the iframe you could insert it with something like:

place?q="+postalcodeVariable+"&key=myAPIkeyishere"

I don’t have a working solution for this exactly, but hopefully this helps get you started 🙂

C

Thanks for this Rob. I can see how that almost gets me there but I don’t have developer knowledge or facility.

Could a script grab the +postalcodeVariable on page load?

Would any other members of the community be able to help with this javascript please?

I would imagine it would be a useful feature for Tips and Tricks Scripts.

Many thanks,

Carl

Reply


Terms & ConditionsCookie settings