Zoom in on a selected marker

[iljapanic]

I have a feeling this should be super easy but I've been struggling for hours now and I still can't figure it out.

When I press a marker in the list (or in the map), I'd like the map to zoom in to a certain level and center the marker. The centering is on by default but I can't seem to figure out the zoom.

Here is my code:

function zoomIn(){
    $('#bh-sl-map-container').storeLocator({
        mapSettings: {
          zoom : 15
      }
    });
  }

  $('#bh-sl-map-container').storeLocator({
    dataType: 'json',
    dataRaw: allLocations,
    storeLimit: -1,
    lengthUnit: 'km',
    fullMapStart: true,
    distanceAlert: -1,
    slideMap: false,
    locationsPerPage: 500,
    infowindowTemplatePath: templatePath1,
    listTemplatePath: templatePath2,
    KMLinfowindowTemplatePath: templatePath3,
    KMLlistTemplatePath: templatePath4,
    dragSearch: true,
    mapSettings: {
      zoom : 0,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      scrollwheel: false,
      styles: styles,
      mapTypeControl: false
    },
    callbackListClick(){
      console.log('location in the list clicked');
      zoomIn();
    }
  });

The callback function is working fine, but zoom doesn't occur. Actually, the zoom settings don't seem to work for me at all, no matter what I set in the mapSettings array, the zoom level is always the same.

Any suggestions are much appreciated.

[bjorn2404]

When using the fullmapstart option the plugin automatically centers and zooms because no origin has been set yet. To programmatically change the zoom level you need the map object, which is not available with the ListClick callback. map.setZoom would need to be used - the mapSettings option is for the default Google Map settings that are used when the map loads.

[iljapanic]

Thank you for a great explanation @bjorn2404

If you would be kind enough and also tell me whether there is a way to access the map object through your plugin?

Using $('#bh-sl-map').get(0); spits out the DOM object but I'm not sure whether it's the correct one

[bjorn2404]

@iljapanic You could just modify the plugin and add the map object as a third parameter. Look for the comment "List click callback" - the map object variable is "map"

[iljapanic]

Thanks for the tip @bjorn2404! I came up with the solution by editing the original plugin, not the most flexible and correct, but it gets the job done :)