Change embedded google map location based on selection

296
November 28, 2016, at 9:41 PM

Thanks to a previous question from another user I have been able to set up an embedded map on my webpage and created some buttons.

<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">Na Fianna</button>
<button typeof="button" data-lat="48.8588589" data-long="2.3470599">St. Pauls</button>
<button typeof="button" data-lat="37.4038194" data-long="-122.081267">Kevins</button>
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9521.05146600762!2d-6.2630277!3d53.374346!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x0%3A0x72398e1c9e377ac0!2sCLG+Na+Fianna!5e0!3m2!1sen!2sie!4v1448021350769" width="400" height="300" frameborder="0" style="border:0" allowfullscreen></iframe>

However I don't know how to get the embedded map to change location based on which button is selected.

Answer 1

Read the documentation for the embed API:

The following URL parameter is required:

center defines the center of the map window, and accepts a latitude and a longitude as comma-separated values (-33.8569,151.2152). Optional parameters

The following optional parameters can be used with any of the map modes listed above.

zoom sets the initial zoom level of the map. Accepted values range from 0 (the whole world) to 21 (individual buildings). The upper limit can vary depending on the map data available at the selected location. maptype can be either roadmap (the default) or satellite, and defines the type of map tiles to load.

One option:

$(function() {
  $('button').each(function(i, btn) {
    $(btn).click(function() {
      var el = $(this)[0];
      var urlbeg="https://www.google.com/maps/embed/v1/view?key=yourApiKey&center=";
      var urlend="&zoom=18&maptype=roadmap";
      var lat=el.dataset.lat;
      var lng=el.dataset.long;
      $("iframe").attr("src",urlbeg+lat+","+lng+urlend);
    });
  });
});

working example

READ ALSO
parse json with jquery and display data in a html table

parse json with jquery and display data in a html table

I need to parse the below json with jquery and display in a html tableDisplay the values of key and count in a html table

320
Wait for ajax calls from another function without using global variables?

Wait for ajax calls from another function without using global variables?

I'm not a fan of using globals but I couldn't figure out another way of achieving what I wanted to do:

228
Previous and next image link in JavaScript

Previous and next image link in JavaScript

I need help for the slider on TweenMaxjs

324
jQuery - Get Content from an XML Page and save to a variable

jQuery - Get Content from an XML Page and save to a variable

I am trying to get the content of an XML Element into a variable:

277