Is this possible?
Let's say I search for a city by zip code and a distance of 10 kilometers, can I set that the map autozooms into the marker results?

"Use the center of the rectangle whose sides are defined by the left-most, right-most, top and bottom locations (this option is insensitive to location clusters)." does not work as expected because at stays at the same zoom level of the initial map

Comments

dancor’s picture

Title: Zoom in atuomatically to result » Zoom in automatically to result
dancor’s picture

Status: Active » Fixed

I am using this code:
http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-ma...

so now my code looks like this:

(function ($) {

  Drupal.behaviors.addGMapMultiLocation = {
    attach: function (context, settings) {

      var locations     = settings.ip_geoloc_locations;
      var mapOptions    = settings.ip_geoloc_multi_location_map_options;
      var centerOption  = settings.ip_geoloc_multi_location_center_option;
      var visitorMarker = settings.ip_geoloc_multi_location_visitor_marker;
      var use_gps       = settings.ip_geoloc_multi_location_visitor_location_gps;
      var markerDirname = settings.ip_geoloc_multi_location_marker_directory;
      var markerWidth   = settings.ip_geoloc_multi_location_marker_width;
      var markerHeight  = settings.ip_geoloc_multi_location_marker_height;
      var markerAnchor  = settings.ip_geoloc_multi_location_marker_anchor;
      var markerColor   = settings.ip_geoloc_multi_location_marker_default_color;
      var imageExt      = '.png';

      if (!mapOptions) {
        alert(Drupal.t('Syntax error in map options.'));
      }
      if (typeof(google) != 'object') {
        // When not connected to Internet.
        return;
      }
      var mapDiv = document.getElementById(settings.ip_geoloc_multi_location_map_div);
      // Create map as a global, see #1954876: Allow map to be centered on the location provided by exposed filter when using geolocation_proximity
      map = new google.maps.Map(mapDiv, mapOptions);

      // A map must have a type, a zoom and a center or nothing will show.
      if (!map.getMapTypeId()) {
        map.setMapTypeId(google.maps.MapTypeId.ROADMAP);
      }
      if (!map.getZoom()) {
        map.setZoom(1);
      }

      if (centerOption != 1 || locations.length == 0) {
        // If no center override option was specified or as a fallback where
        // the user declines to share their location, we set the center based
        // on the mapOptions. Without a center there won't be a map!
        map.setCenter(new google.maps.LatLng(
          mapOptions.centerLat ? mapOptions.centerLat : 0,
          mapOptions.centerLng ? mapOptions.centerLng : 0));
      }

      if (visitorMarker || centerOption == 2) {
        // Retrieve visitor's location, fall back on supplied location, if not found.
        if (use_gps) {
          // Center the map on the user's current location
          if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(handleMapCenterAndVisitorMarker1, handlePositionError, {enableHighAccuracy: true});
          }
          else if (typeof(geo_position_js) == 'object' && geo_position_js.init()) {
            // Use the unified API.
            geo_position_js.getCurrentPosition(handleMapCenterAndVisitorMarker1, handlePositionError, {enableHighAccuracy: true});
          }
        }
        else {
          // Use supplied visitor lat/lng to center and set marker.
          var latLng = settings.ip_geoloc_multi_location_center_latlng;
          if (latLng) {
            handleMapCenterAndVisitorMarker2(latLng[0], latLng[1]);
          }
        }
      }

      var defaultPinImage = !markerColor ? null : new google.maps.MarkerImage(
        markerDirname + '/' + markerColor + imageExt,
        new google.maps.Size(markerWidth, markerHeight),
        // Origin.
        new google.maps.Point(0, 0),
        // Anchor.
        new google.maps.Point((markerWidth / 2), markerAnchor));
      var shadowImage = null;

      var i = 1;
      var balloonTexts = [];
      var center = null;
	  bounds  = new google.maps.LatLngBounds();
      for (var key in locations) {
        var mouseOverText = Drupal.t('Location #@i', { '@i': i++ });
        var position = new google.maps.LatLng(locations[key].latitude, locations[key].longitude);
		bounds.extend(position);
        if (!center && centerOption == 1) {
          // If requested center map on the first location, if any.
          map.setCenter(position);
          center = position;
        }
        var pinImage = defaultPinImage;
        if (locations[key].marker_color) {
          pinImage = new google.maps.MarkerImage(
            markerDirname + '/' + locations[key].marker_color + imageExt,
            new google.maps.Size(markerWidth, markerHeight),
            // Origin.
            new google.maps.Point(0, 0),
            // Anchor.
            new google.maps.Point((markerWidth / 2), markerAnchor));
        }
        marker = new google.maps.Marker({ map: map, icon: pinImage, shadow: shadowImage, position: position, title: mouseOverText });

        // Funny index is because listener callback only gives us position.
        balloonTexts['LL' + position] = '<div class="balloon">' + locations[key].balloon_text + '</div>';
        google.maps.event.addListener(marker, 'click', function(event) {
          new google.maps.InfoWindow({
            content: balloonTexts['LL' + event.latLng],
            position: event.latLng,
            // See #1777664: Google Maps marker balloons and zoom ctrl  render badly with some themes but fine on Leaflet.
            maxWidth: 200
          }).open(map);
        });
      }
	  if(locations.length >= 1){
	  map.fitBounds(bounds);
	  map.panToBounds(bounds);
	  }

      function handleMapCenterAndVisitorMarker1(visitorPosition) {
        handleMapCenterAndVisitorMarker2(visitorPosition.coords.latitude, visitorPosition.coords.longitude);
      }

      function handleMapCenterAndVisitorMarker2(latitude, longitude) {
        var visitorPosition = new google.maps.LatLng(latitude, longitude);
        if (centerOption == 2) {
          map.setCenter(visitorPosition);
        }
        if (visitorMarker) {
          showSpecialMarker(visitorPosition, Drupal.t('Your retrieved position (' + latitude + ', ' + longitude + ')'));
        }
      }

      function showSpecialMarker(position, text) {
        if (visitorMarker == true) {
          specialMarker = new google.maps.Marker({ map: map, position: position, title: text });
        }
        else {
          // Interpret value of visitorMarker as the marker color.
          // eg "00FF00" for bright green.
          var pinColor = visitorMarker;
          // use character like "x", for a dot use "%E2%80%A2".
          var pinChar = "%E2%80%A2";
          // Black.
          var textColor = "000000";
          // Note: cannot use https: here...
          var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=" + pinChar + "|" + pinColor + "|" + textColor,
            new google.maps.Size(21, 34), new google.maps.Point(0, 0), new google.maps.Point(10, 34));
          specialMarker = new google.maps.Marker({ map: map, icon: pinImage, shadow: shadowImage, position: position, title: text });
        }
        google.maps.event.addListener(specialMarker, 'click',  function(event) {
          new google.maps.InfoWindow({
            content: text,
            position: event.latLng
          }).open(map);
        });
      }

      // Fall back on IP address lookup, for instance when user declined to share location (error 1)
      function handlePositionError(error) {
        //alert(Drupal.t('IPGV&M multi-location map: getCurrentPosition() returned error !code', {'!code': error.code}));
        var latLng = settings.ip_geoloc_multi_location_center_latlng;
        if (latLng) {
          handleMapCenterAndVisitorMarker2(latLng[0], latLng[1]);
        }
      }
    }
  }
})(jQuery);
rdeboer’s picture

The option you talk about is available when you use IPGV&M with Leaflet.

If you've made it work with Google Maps, then great! Thank you.

Can you please do a proper diff? How am I supposed to figure out which lines you changed?

Rik

dancor’s picture

StatusFileSize
new206 bytes

Oh ok, didn't know this.
Is the diff ok?
Is the leaflet option better or should I keep the google maps version?
I need to use the custom markers and other custom images ...

rdeboer’s picture

Thanks for the patch!

You don't need to use Leaflet, but it could be worth a look. You can always switch back to Google, if there's a function in Google that Leaflet does not support.
You get a lot more map styles when using Leaflet....
See the "Leaflet More Maps" module project page and the link to the demo on that project page.

You also get the option to fill your markers with font icons: http://flink.com.au/ramblings/spruce-your-map-markers-font-icons

Rik

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

rdeboer’s picture

Assigned: Unassigned » rdeboer
Status: Closed (fixed) » Patch (to be ported)

Re-opening this, to remind myself to apply and test the patch from @dancor in #4.

eloivaque’s picture

the patch of comment #4 Work for me

nigelcunningham’s picture

Issue summary: View changes
Status: Patch (to be ported) » Needs work
StatusFileSize
new1.11 KB

Here is a simple reroll of the autozoom patch, but I think it needs a check of the centerOption around the last chunk, and I think the locations.length check should check for the length being > 0. If there's one marker, zooming to it is still valid.

rdeboer’s picture

Thanks NIgel & dancor!
Need to apply this soon.
Rik

rdeboer’s picture

Implemented. Checked in with attribution to dancor.

To use: select "Use the center of the rectangle whose sides are defined by the left-most, right-most, top and bottom locations (this option is insensitive to location clusters)."

rdeboer’s picture

Title: Zoom in automatically to result » Zoom in automatically to include all markers ("Auto-box" for GMAP)
Version: 7.x-1.23 » 7.x-1.24
Status: Needs work » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.