Overring the map zoom level in Google Maps for ExpressionEngine

Question

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

Answer 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}

Answer 2

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>