CODEWITHSUNDEEP
phpgoogle-maps
Test
Test

Reputation: 315

How to turn google maps url into an iframe-friendly url

This is a sample url:

https://www.google.co.uk/maps/place/Barnes+%26+Noble+Booksellers+86th+%26+Lexington/@40.7747314,-73.9653734,15z/data=!4m5!1m2!2m1!1sBarnes+%26+Noble,+5th+Avenue,+New+York,+NY,+United+States!3m1!1s0x0:0xdec8ade72ab827a7

This clearly does not work: 

<iframe
  width="600"
  height="450"
  frameborder="0" style="border:0"
  src="https://www.google.co.uk/maps/place/Barnes+%26+Noble+Booksellers+86th+%26+Lexington/@40.7747314,-73.9653734,15z/data=!4m5!1m2!2m1!1sBarnes+%26+Noble,+5th+Avenue,+New+York,+NY,+United+States!3m1!1s0x0:0xdec8ade72ab827a7"
</iframe>

How to turn the sample url into a url that works for the iframe? I don't even have to use iframe. I just want to integrate google maps by using urls supplied in the format listed above.

I'm using PHP, if that matters.

Upvotes: 5

Views: 8426

Answers (2)

Harsh Gurm
Harsh Gurm

Reputation: 11

You simply need an embed url

  1. Just Simply type in the address Google/Google Maps

  2. Click Share(Just below directions).

  3. Select Embed map. Copy/paste the url in your code.

Upvotes: -3

Halvor Holsten Strand
Halvor Holsten Strand

Reputation: 20536

Given the URL format you provided I would try to transform it to Google Maps Embed API URL. This requires a API key. You had the following URL:

https://www.google.co.uk/maps/place/Barnes+%26+Noble+Booksellers+86th+%26+Lexington/@40.7747314,-73.9653734,15z/data=!4m5!1m2!2m1!1sBarnes+%26+Noble,+5th+Avenue,+New+York,+NY,+United+States!3m1!1s0x0:0xdec8ade72ab827a7

Transforming it to an embed URL only requires you to extract the address part of the URL you already have. The result will be:

https://www.google.com/maps/embed/v1/place?key=API_KEY&q=Barnes+%26+Noble+Booksellers+86th+%26+Lexington

If you alternatively were to receive the URL with no specific place, just a view, it might look like this:

https://www.google.co.uk/maps/@40.7777212,-73.9567045,15z

In this example you have to extract the latitude, longitude and zoom level (15z), and create a URL like this:

https://www.google.com/maps/embed/v1/view?key=API_KEY&center=40.7777212,-73.9567045&zoom=15

Reading the API there are two more modes (search and direction) that can be handled in a similar way, but aren't as likely to be used in your case.

As for the extracting I would probably use regex or search and substring, depending on how varying the URLs you receive are.

Upvotes: 7

Related Questions