CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
Jimmy Adams
Jimmy Adams

Reputation: 23

Control Zoom Level With an external button

I've spent a good chunk of today trying to figure out if this even possible, and I haven't been able to figure it out.

I have a Google Map, with an array of markers that are placed in different towns and cities. I also have a few buttons outside of my map, that pan to Lat,Lng locations. So basically, I have a map, with buttons outside of it with the town or city names, and when the user clicks on the button, it pans to the location on the map.

What I'd like to do though, is zoom to a different level when the buttons are clicked.

My issue is that that when the map is initialized, I have it zoomed out so users can see all the markers, but when a user clicks on a specific location, I want to the map to be zoomed in.

Is this even possible?

Here's my html buttons code:

<btn style="cursor:pointer" class="location" data-location="50.0515016,-110.7794323">Medicine Hat</btn>

And then part of my js code:

var marker;

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);

  map.panTo(panPoint)
}

var map;

function initialize() {

  var mhbrewco = {
    lat: 50.062254,
    lng: -110.71656
  }
  var mapOptions = {
    zoom: 6,
    center: new google.maps.LatLng(52.086594, -113.307591),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    mapTypeControl: false,
    streetViewControl: false
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var BrewIcon = 'http://medicinehatbrewingcompany.ca/wp-content/uploads/2016/08/favicon-32x32-1.png';

  marker = new google.maps.Marker({
    map: map,
    position: mhbrewco,
    icon: BrewIcon
  });

  var contentString = '<div id="content">' +
    '<div id="siteNotice">' +
    '</div>' +
    '<h1 id="firstHeading" class="firstHeading">Medicine Hat Brewing Company</h1>' +
    '<div id="bodyContent">' +
    '<p><b>Address:</b>' +
    ' 1366 Brier Park Dr NW' +
    ' Medicine Hat, AB T1C 1Z7</p>' +
    '<p><b>Phone:</b> <a href="tel:+14035251260">(403)525-1260</a>' +
    '</div>' +
    '</div>';

  var infowindow = new google.maps.InfoWindow({
    content: contentString
  });

  marker.addListener('click', function() {
    infowindow.open(map, marker);
  });

  jQuery(document).ready(function($) {
    $('.location').on('click', function() {
      pan($(this).data('location'));
   });
  });

Here's a link to the page I'm working with: http://medicinehatbrewingcompany.ca/find-our-brews/

With the help of a comment I figured this out.. just needed to add a little line of code to this:

jQuery(document).ready(function($) {
    $('.location').on('click', function() {
    map.setZoom(12);
      pan($(this).data('location'));
   });

Upvotes: 0

Views: 1997

Answers (1)

sesamechicken
sesamechicken

Reputation: 1981

I believe you have to call map.setZoom(2); right before your panTo method.

So your fn would look like this:

function pan(latlon) {
  var coords = latlon.split(",");
  var panPoint = new google.maps.LatLng(coords[0], coords[1]);
  map.setZoom(10); // or whatever lvl of zoom desired
  map.panTo(panPoint);
}

Upvotes: 2

Related Questions