CODEWITHSUNDEEP
jquerygoogle-mapsonclick
NiallL
NiallL

Reputation: 77

Change embedded google map location based on selection

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.

Upvotes: 2

Views: 4263

Answers (2)

YMH
YMH

Reputation: 3093

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

  1. &origin=lat,lang
  2. &center=lat,lang
  3. &ll=lat,lang

Upvotes: 0

geocodezip
geocodezip

Reputation: 161334

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

Upvotes: 4

Related Questions