5

I'm using ExpressionEngine 2.5.3 and Google Maps for ExpressionEngine 3.0.190 (aka 3.1 beta) with the following code:

{exp:gmap:init id="map1" class="gmap" scrollwheel="false" style="width:930px;height:500px" clusterStyles="{url: '/assets/images/cluster-icon-blue.png', textColor: '#fff', textSize: '12', height: 52, width: 53, anchor: [0, 0]}" overviewMapControl="true" overviewMapControlOptions="{opened:true}"}

{exp:channel:entries channel="people" status="open" disable="categories|category_fields|member_data|pagination" limit="1000" dynamic="no" sort="asc"}
    {cf_people_geo_location id="map1" show_one_window="true" icon="/assets/images/aabc-map-icon-white.png" infobox="true" offsetY="-45" offsetX="15" closeBoxMargin="5px" class="ui-infobox-dark" closeBoxURL="/themes/third_party/gmap/css/images/white-close-button.png" style="width: '250px'" clearanceX="10" show_one_window="true" clustering="true"}
        <p><a href="/register/{url_title}/" title="View {title}">View {title} &raquo;</a></p>
    {/cf_people_geo_location}
{/exp:channel:entries}

Is it possible to set the zoom level that the map uses on page load? It seems to set it automatically based on the points being plotted, but I'd like to override this value and zoom in a few notches.

Thanks,

Ste

Stephen
  • 553
  • 3
  • 12
  • 23

2 Answers2

1

There is a zoom="" parameter for the gmap tags, except sometimes I found it didn't work (or I didn't use it correctly somehow).

To get it zoomed to the level I wanted, I manually added some regular Google Maps (not the addon) code closer to the end of the page:

<script>
  map1_map.setZoom(15);
</script>
Jason Varga
  • 1,949
  • 2
  • 21
  • 29
  • It didn't work because you likely didn't use the extend_bounds="false" parameter. Your JS is correct (and is the same thing I do), but by default the script resized things based on the bounds of all the markers. This all happens asynchronously, so if you don't prevent the bounds from auto extending (extend_bounds="false") then it won't work correctly because the zoom method is executed *before* the bounds is returned. (Kinda confusing) – Justin Kimbrell Nov 09 '12 at 17:40
  • Thanks for your reply with a JS option, Jason. Sounds like you were making the same mistake with the zoom parameter that I was. – Stephen Nov 10 '12 at 05:01
1

Use the extend_bounds parameter and set it to "false"

https://objectivehtml.com/google-maps/documentation/tag/marker#extend_bounds

Try this:

{exp:gmap:init id="map1" class="gmap" scrollwheel="false" style="width:930px;height:500px" clusterStyles="{url: '/assets/images/cluster-icon-blue.png', textColor: '#fff', textSize: '12', height: 52, width: 53, anchor: [0, 0]}" overviewMapControl="true" overviewMapControlOptions="{opened:true}" zoom="10"}

{exp:channel:entries channel="people" status="open" disable="categories|category_fields|member_data|pagination" limit="1000" dynamic="no" sort="asc"}
    {cf_people_geo_location id="map1" show_one_window="true" icon="/assets/images/aabc-map-icon-white.png" infobox="true" offsetY="-45" offsetX="15" closeBoxMargin="5px" class="ui-infobox-dark" closeBoxURL="/themes/third_party/gmap/css/images/white-close-button.png" style="width: '250px'" clearanceX="10" show_one_window="true" clustering="true" extend_bounds="false"}
        <p><a href="/register/{url_title}/" title="View {title}">View {title} &raquo;</a></p>
    {/cf_people_geo_location}
{/exp:channel:entries}
Justin Kimbrell
  • 594
  • 4
  • 11
  • Thanks for this Justin. Given that there's 1 map on the page and 500 markers, I didn't even think to look within the marker tag to add the extend bounds parameter in order to make the zoom parameter work. I've just tried your combination of code and the zoom parameter now works. I noticed that you need to add the 'center' parameter too though, otherwise, it centres on the centre of the World, not on the centre of the points. – Stephen Nov 10 '12 at 04:59