Change embedded google maps location with HTML links

Question

I have a webpage with a google-maps embedded in it.

Currently the location is hard coded into the script and goes to Mountain View. which looks like this:

      <iframe width="600" height="450" frameborder="0" style="border:0"
src="https://www.google.com/maps/embed/v1/view?zoom=12&center=37.3861,-122.0839&.......>

I want to keep mountain view as the default location but I also have 5 links (Paris - Beijing - London etc...) and I want to be able to change the location of the embedded map by clicking on the links

How can I do this?

Thanks

Answer 1

$('button').each(function(i, btn) {
  $(btn).click(function() {
    $('iframe').attr('src', 'https://www.google.com/maps/embed/v1/place?key=AIzaSyDn5TU07R040YBRD-9ePpM8Noh-Z1NNVyw&q=' + $(btn).data('lat') + ',' + $(btn).data('long'));
    // this api key will expire. It's just for this example.
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button typeof="button" data-lat="37.9758438" data-long="23.7454209">Greece</button>
<button typeof="button" data-lat="48.8588589" data-long="2.3470599">Paris</button>
<button typeof="button" data-lat="37.4038194" data-long="-122.081267">Mountain View</button>

<iframe width="600" height="450" frameborder="0" style="border:0" allowfullscreen src="https://www.google.com/maps/embed/v1/place?key=AIzaSyDn5TU07R040YBRD-9ePpM8Noh-Z1NNVyw&q=37.4038194,-122.081267"></iframe>

This is an example. There are many ways to achieve the same result. Note that I used jQuery for element manipulation.

Answer 2

For anyone looking for solution to change location on embedded google map, it is enough to add two parameters to link generated by google mymaps. Whenever you update iframe's src attribute, map will be centered at location passed as "&ll" parameter with zoom set as "&z" parameter.

Example google embedded map: https://www.google.com/maps/d/embed?mid=1yXnPlHWUqk3okD9H5SlyohY-J3XZ6MY

Link with new location and zoom: https://www.google.com/maps/d/embed?mid=1yXnPlHWUqk3okD9H5SlyohY-J3XZ6MY&z=16&ll=46.684402661532054,6.351340087579852