Get Google map embed url from regular link

Question

I recently came across a site where you can drag the regular Google map url to the their page and it will automatically embed it via iframe. I read the Google Maps Embed API and it looks like there's no way to do this. I'm not sure if this can be achieved using regex to extract the parameters.

// Sample https://www.google.com/maps/@37.3321023,-121.9035969,14z

$(button).click(function() {
   reg-url = $('#inputbox').val();
   convert();
});

function convert() {
    embedid = //get param from reg-url
    $('.wrapper').html("<iframe src='https://www.google.com/maps/embed?pb="+embedid+"'>");
}

So basically I want to create a jquery function that will convert regular map url to embed url.

Answer 1

function GoogleMapsURLToEmbedURL(GoogleMapsURL)
{
    var coords = /\@([0-9\.\,\-a-zA-Z]*)/.exec(GoogleMapsURL);
    if(coords!=null)
    {
        var coordsArray = coords[1].split(',');
        return "https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d20000!2d"+coordsArray[1]+"!3d"+coordsArray[0]+"!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2suk!4v1486486434098";
    }
}

In your sample:-

https://www.google.com/maps/@37.3321023,-121.9035969,14z

After the '@', 37.3321023 is one co-ordinate, -121.9035969 is the second, and 14z is the zoom.

I've done the co-ordinates for you, all you'd need to do is write some if's to work out turning the zoom into an integer for the embed (I've set it to always be 20000, which looks to be around the 14th zoom level according to the web interface.