Little Modification of GoogleMap Mod for AutoZoom

[balbi21]

Hi there,

here a little modification of the GoogleMap-Mod Renderer to automatically zoom to all shown markers depending on the Markergroup-selection in the ComboBoxes.

cnt.article.php:

Add the line

Code: Select all

 map = map'.$crow["acontent_id"].';

at the end of the function initMap to make the map accessible for other functions...

Then modify the toggleGroup-Function to Reposition the Map at User-Selection:

Code: Select all

if ($content['googlemaps']['gmaps_showcat']) {
$output .= 'function Reposition(){
    var MinX = 360;
    var MinY = 360;
    var MaxX = 0;
    var MaxY = 0;

    for(var i in markerGroups137)
    {
        for(var j = 0; j < markerGroups137[i].length; j++)
        {
            var marker = markerGroups137[i][j];
            if(marker.isHidden())
            {
            }
            else
            {
                var l = marker.getLatLng();
                if (l.lat() < MinX)MinX = l.lat();
                if (l.lat() > MaxX)MaxX = l.lat();
                if (l.lng() < MinY)MinY = l.lng();
                if (l.lng() > MaxY)MaxY = l.lng();
            }
        }
    }

  if(MinX < 360)
  {
  var sw = new google.maps.LatLng(MinX,MinY);
  var ne = new google.maps.LatLng(MaxX,MaxY);
  var bounds = new google.maps.LatLngBounds(sw,ne);
  map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
  }
}
';

$output .= 'function toggleGroup'.$crow["acontent_id"].'(type) {
  for (var i = 0; i < markerGroups'.$crow["acontent_id"].'[type].length; i++) {
    var marker = markerGroups'.$crow["acontent_id"].'[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 
  Reposition();
}
';
}

I don't know if there is a more elegant solution e.g. without modifiing the source of the module - if so, please don't hesitate to inform me

(Example of this AutoZoom: http://www.janina-arpa.de/AnfahrtVHS.phtml)

Best regards,
Bjoern

[update]

Which value did you choose for the initial zoom level and how does the map display at start time when no point has been choosen? Is the local search function still zooming in an appropriate manner then?
BTW a really nice and handy additional feature
(This should belong to the original modul thread, doesn't it?)
Could you please specify the "at the end of..."?

[balbi21]

Which value did you choose for the initial zoom level and how does the map display at start time when no point has been choosen?
Is the local search function still zooming in an appropriate manner then?

This modification only belongs to the Toggle-Event of the comboboxes - all other Zoom-Levels (initial, search, manual Zoom, etc.) will work still in the same manner as before.
The only modification is a new Zoom-Boundaries-Calculation of the non-hidden-marker when a user changes a combobox-Value.

Could you please specify the "at the end of..."?

Somewhere in the middle of the file, you find the end of the InitMap-Trace.
The map-Variable is already there defined before initmap-function, so you have only to initialize it there with the specific map:

Code: Select all

  //set center new and set zoomlevel
      $output .= '
  var sw = new google.maps.LatLng('.floatval($bounds_latu[0]-$corr_lat).','.floatval($bounds_lonu[0]-$corr_lon).');
  var ne = new google.maps.LatLng('.floatval($bounds_lato[0]+$corr_lat).','.floatval($bounds_lono[0]+$corr_lon).');
  var bounds = new google.maps.LatLngBounds(sw,ne); 
  map'.$crow["acontent_id"].'.setCenter(bounds.getCenter(), map'.$crow["acontent_id"].'.getBoundsZoomLevel(bounds)); 
  map = map'.$crow["acontent_id"].';
';
}

[update]

Well, I just did a little testing: If you've choosen another marker for a geopoint than the standard one, it will then switch to the default marker (after the code change) - so there must be missing something (try to choose one of the other markers, you will see)

[balbi21]

What do you mean with standard-Markers?
I have added two "flags" (in one categorie) and a "pin" to this demo-map - and (i think) everything work...(http://www.janina-arpa.de/AnfahrtVHS.phtml)


What should i do exactly to reproduce your error?

Best regards,
Bjoern

[breitsch]

Nice Feature, but only as option. I guess it should not be standard behavior. Will be in next Version as an option.
Your code will fail when you have more than one map on the same site!
Try to go on with: map'.$crow["acontent_id"].' not to declare a new map with: map = map'.$crow["acontent_id"].';
You must then rename the function as well (best with: $output .= 'function Reposition'.$crow["acontent_id"].'(){ )
and further rename all '137' in your code again with: '.$crow["acontent_id"].'

I don't quite get claus' marker problem either. ?? There went something else wrong I guess?

[update]

I mean I have now 30 points with red flags. Now I insert the code posted by Björn and toggling these flags (initially off) is turning them into googles default icon.

more than one map

But there are 2 maps on this site - the other one without a toggler and starting with all icons visible. This one is displaying it the right way.

in next Version as an option

[balbi21]

The scales fell from my eyes
Of course - this code only works in this special case with "ID = 137" and one map with id 137

i will update the code fragment tomorrow to support the dynamic id and more than one map - i think there will be few changes...

This function (perhaps with an editable Offset to the border) as an option (to enable in the backend) inside the released module would be very nice
I think there are several further "nice features" i could image *g* (Subcategories, more than one but not all categories chosen at startup, etc. - but the module is already a VERY GREAT ADDON for phpwcms, very great work!!!

Best regards,
Bjoern

[Jensensen]

excuse me,
one question of a non-google-map-pro:

a) zoom, in this [thread] case means, to --> reduce the map size (automatically), to have all --> markers visible in one, the actual map, isn't it?
b) when clicking on one of the markers, especially --> "route", I'm linked [always??] out of the phpwcms driven site, to maps.google... ??
c) is there no way [while calculating routes] to stay on the original site?

thanks
greetz

[update]

ad a) zoom = autozoom. Yes.
ad b) No. Clicking one of the markers is just revealing some infotext (defined at backend) and (if defined) a way to display pages of phpwcms with own template - verrry cool
Also see "Maximized Info Window" at http://web.casa-loca.com/index.php?aid=47
Clicking the "check route" is indeed leading off and away to google...
ad c) don't know, but as breitsch already mentioned somewhen: also google should have it's part... of the map-cake

PS and not to mention this KML feature...

[breitsch]

Claus, what about a link to you marker problem? You know, links sometimes are better than thousand words!

[update]

Hi breitsch,
no I don't have a problem (anymore) because I changed the file back to your original one

[balbi21]

Now the modification should work with multiple maps on a site no matter wich Contentpart-ID:

1. The map has to be declared global and not within the init-function:

Code: Select all

$output .= '<script type="text/javascript">
//<![CDATA[
var map;
var map'.$crow["acontent_id"].';';

2. Of course remove the local "var" within init-function

Code: Select all

$output .= 'function initMap'.$crow["acontent_id"].'(container) {
map'.$crow["acontent_id"].' = new google.maps.Map2

3. The Reposition-function gets an ID so every map has its own
Of course the new function-name should be called by the toggle-function:

Code: Select all

if ($content['googlemaps']['gmaps_showcat']) {
$output .= 'function Reposition'.$crow["acontent_id"].'(){
    var MinX = 360; var MinY = 360;
    var MaxX = 0; var MaxY = 0;
    var Offset = 0.015;

    for(var i in markerGroups'.$crow["acontent_id"].')
    {
        for(var j = 0; j < markerGroups'.$crow["acontent_id"].'[i].length; j++)
        {
            var marker = markerGroups'.$crow["acontent_id"].'[i][j];
            if(marker.isHidden())
            {
            }
            else
            {
                var l = marker.getLatLng();
                if (l.lat() < MinX)MinX = l.lat();
                if (l.lat() > MaxX)MaxX = l.lat();
                if (l.lng() < MinY)MinY = l.lng();
                if (l.lng() > MaxY)MaxY = l.lng();
            }
        }
    }

  if(MinX < 360)
  { 
  var sw = new google.maps.LatLng(MinX-Offset,MinY-Offset);
  var ne = new google.maps.LatLng(MaxX+Offset,MaxY+Offset);
  var bounds = new google.maps.LatLngBounds(sw,ne);
  map'.$crow["acontent_id"].'.setCenter(bounds.getCenter(), map'.$crow["acontent_id"].'.getBoundsZoomLevel(bounds));
  }
}
';

$output .= 'function toggleGroup'.$crow["acontent_id"].'(type) {
  for (var i = 0; i < markerGroups'.$crow["acontent_id"].'[type].length; i++) {
    var marker = markerGroups'.$crow["acontent_id"].'[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 
  Reposition'.$crow["acontent_id"].'();
}
';
}

I think, this could work until it was refactored and embedded into an official option *g*
(e.g. http://www.janina-arpa.de/AnfahrtVHS.phtml - now with two maps for demonstration)

Best regards,
Bjoern

[update]

Ok - to give some feedback: this is working now - nice addition!
Only one: if I have 5 markers in one cat, but only one in another cat and do a switch to this single one it's zooming at street level. Can't this handle the preset zoom level instead (example) - because for quickly viewing markers this is a little bit irritating...
I will use it together with the local search: with the original file my search point isn't zooming in (as intended). Now I can add the markers around my search point to get an overview. Sehr very cool.
With your changes added this isn't possible anymore
Do you have any idea how to combine these two?

[balbi21]

With this Reposition-code fragment, it should zoom to the boundaries + offset if there are more than one marker shown and to the default zoom-level (defined in backend) if only one marker was choosen by user category selection...

Code: Select all

if ($content['googlemaps']['gmaps_showcat']) {
$output .= 'function Reposition'.$crow["acontent_id"].'(){
    var MinX = 360; var MinY = 360;
    var MaxX = 0; var MaxY = 0;
    var Offset = 0.015;
    var MarkerCount = 0;

    for(var i in markerGroups'.$crow["acontent_id"].')
    {
        for(var j = 0; j < markerGroups'.$crow["acontent_id"].'[i].length; j++)
        {
            var marker = markerGroups'.$crow["acontent_id"].'[i][j];
            if(marker.isHidden())
            {
            }
            else
            {
                var l = marker.getLatLng();
                if (l.lat() < MinX)MinX = l.lat();
                if (l.lat() > MaxX)MaxX = l.lat();
                if (l.lng() < MinY)MinY = l.lng();
                if (l.lng() > MaxY)MaxY = l.lng();
                MarkerCount++;
            }
        }
    }

  if(MarkerCount == 1)
  { 
     map'.$crow["acontent_id"].'.setCenter(new google.maps.LatLng(MinX, MinY), '.$content['googlemaps']['gmaps_initzoom'].');
  }
  else if(MarkerCount > 1)
  {
  var sw = new google.maps.LatLng(MinX-Offset,MinY-Offset);
  var ne = new google.maps.LatLng(MaxX+Offset,MaxY+Offset);
  var bounds = new google.maps.LatLngBounds(sw,ne);
  map'.$crow["acontent_id"].'.setCenter(bounds.getCenter(), map'.$crow["acontent_id"].'.getBoundsZoomLevel(bounds));
  }
}
';

$output .= 'function toggleGroup'.$crow["acontent_id"].'(type) {
  for (var i = 0; i < markerGroups'.$crow["acontent_id"].'[type].length; i++) {
    var marker = markerGroups'.$crow["acontent_id"].'[type][i];
    if (marker.isHidden()) {
      marker.show();
    } else {
      marker.hide();
    }
  } 
  Reposition'.$crow["acontent_id"].'();
}
';
}

I will look at the local search tomorrow - i think - have you a link of your map, so i can see what you are intend to do?

Best Regards,
Bjoern