Jakar Jakar - 5 months ago 31
HTML Question

Embed google map using share url

Say, you go to google maps and search for 'Walmart', then choose the first Walmart in the list, and you get a URL like:

https://www.google.com/maps/place/Walmart+Supercenter/@41.7991677,-70.5882922,10z/data=!4m5!1m2!2m1!1swalmart!3m1!1s0x89e4c6127cc5b685:0x104d337439f46ea9


then if you go to that URL, it gives you a valid map with the pinpoint. This (above) is the URL that would be stored in my database, thus the URL I want to use to embed a map.

Of course, I can't use that URL to embed in an iframe, and I instead have to use:
https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d380717.11119594605!2d-70.5882922!3d41.7991677!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89e4c6127cc5b685%3A0x104d337439f46ea9!2sWalmart+Supercenter!5e0!3m2!1sen!2sus!4v1445294674664


So... for any shareable Google Maps url, how can I convert it to an embeddable url to be used as the iframe
src
?

I can do it server-side using PHP or client-side with javascript. use of regex would be acceptable.

Answer

This could do the trick :

$matches = [];

preg_match("/@(.*?),(.*?),/",$str,$matches);

$place = $matches[1];

preg_match("/@(.*?),(.*?),/",$str,$matches);

$lat = $matches[1];
$long = $matches[2];

echo '<iframe src="https://www.google.com/maps/embed/v1/place?q='.$place.'&center='.$lat.','.$long.'&key=AIzaSyAN0om9mFmy1QN6Wf54tXAowK4eT0ZUPrU&zoom=8" frameborder="0"></iframe>';

After the first @ char it is located the latitude and logitude, which you can extract using the regex I wrote, and than capture the output on 2 groups and add it that on the embedd URL.