Change embedded google map location based on selection

Question

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.

So to expand I would like the iframe to update with the coordinates in the button that is selected and show that location on the embedded google map on my page. — NiallL
– NiallL, Commented Nov 20, 2015 at 13:32
Your current <iframe> has a "place" selected. Do you want that for the other coordinates? Or just a map centered on those coordinates? — geocodezip
– geocodezip, Commented Nov 20, 2015 at 15:55
Once someone clicks on one of the buttons the map should change to that specific place. I haven't actually used the specific coordinates in the code that I want yet as I assume I can change those later as appropriate. — NiallL
– NiallL, Commented Nov 20, 2015 at 16:14
This is what I am trying to emulate but I am not sure where each piece of code should be placed in ruby on rails. stackoverflow.com/questions/31633278/… — NiallL
– NiallL, Commented Nov 20, 2015 at 16:34

geocodezip · Accepted Answer · 2015-11-20 17:51:25Z

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

YMH · Accepted Answer · 2020-09-18 01:22:47Z

0

add one of the following parameters at the end of your map URL to change the map location:

&origin=lat,lang
&center=lat,lang
&ll=lat,lang

answered Sep 18, 2020 at 1:22

YMH

3,1653 gold badges32 silver badges26 bronze badges

Collectives™ on Stack Overflow

Change embedded google map location based on selection

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related