Change Embedded Google Maps Location With Html Links

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: I want to keep mountain

Solution 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.
  });
});

<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><buttontypeof="button"data-lat="37.9758438"data-long="23.7454209">Greece</button><buttontypeof="button"data-lat="48.8588589"data-long="2.3470599">Paris</button><buttontypeof="button"data-lat="37.4038194"data-long="-122.081267">Mountain View</button><iframewidth="600"height="450"frameborder="0"style="border:0"allowfullscreensrc="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.