title: How can i set the default zoom with js gmap?
body: <p>I've tried to add <code>zoom: x</code> to the map parameters but it doesn't work. Any idea?
  Maybe im not adding the code to the correct function?</p>
  <p>(I think it's because there are more than one marker)</p>
  <p>The code:</p>
  
  <pre><code>&lt;div id=&quot;&lt;?php echo esc_attr( $map_id ); ?&gt;&quot; class=&quot;stm_gmap_wrapper&lt;?php echo esc_attr( $css_class ); ?&gt;&quot;&lt;?php echo( ( $map_style ) ? ' style=&quot;' . esc_attr( implode( ' ', $map_style ) ) . '&quot;' : '' ); ?&gt;&gt;
      &lt;?php $google_api_key = get_theme_mod( 'google_api_key', false );
      if( current_user_can('administrator') &amp;&amp; empty( $google_api_key ) ){ ?&gt;
          &lt;div class=&quot;alert alert-danger alert-dismissible fade in text-center&quot;&gt;
              &lt;button class=&quot;close&quot; type=&quot;button&quot; data-dismiss=&quot;alert&quot;&gt;×&lt;/button&gt;
              You need to enter your &lt;strong&gt;Google Maps API key&lt;/strong&gt; under Appearance &gt; Customize &gt; Site Settings &gt; Google API Settings.
          &lt;/div&gt;
      &lt;?php } ?&gt;
      &lt;div&lt;?php echo( ( $map_style ) ? ' style=&quot;' . esc_attr( implode( ' ', $map_style ) ) . '&quot;' : '' ); ?&gt; id=&quot;&lt;?php echo esc_attr( $gmap_id ); ?&gt;&quot; class=&quot;stm_gmap&quot;&gt;&lt;/div&gt;
      &lt;script type=&quot;text/javascript&quot;&gt;
          jQuery(document).ready(function ($) {
              google.maps.event.addDomListener(window, 'load', init);
              var &lt;?php echo esc_js( $map_id ); ?&gt;, markers = [], gmarkers = [], &lt;?php echo esc_js( $owl_id ); ?&gt; = $(&quot;#&lt;?php echo esc_js( $owl_id ); ?&gt;&quot;), default_marker_icon = '&lt;?php echo esc_url( $marker ); ?&gt;';
              $(&quot;#skin_color span&quot;).on('click', function () {
                  for (var i = 0; i &lt; gmarkers.length; i++) {
                      if( $(this).attr('id') == 'site_style_default' ){
                          gmarkers[i].setIcon('&lt;?php echo get_template_directory_uri(); ?&gt;/assets/images/markers/map-marker-site_style_blue.png');
                      }else{
                          gmarkers[i].setIcon('&lt;?php echo get_template_directory_uri(); ?&gt;/assets/images/markers/map-marker-'+$(this).attr('id')+'.png');
                      }
                  }
              });
              function init() {
                  var mapOptions = {
                      zoom: 1,
                      mapTypeId: 'hybrid',
                      zoomControlOptions: {
                          position: google.maps.ControlPosition.LEFT_TOP,
                      },
                      streetViewControl: false,
                      scrollwheel: &lt;?php echo esc_js( $disable_mouse_whell ); ?&gt;,
                      styles: [{&quot;stylers&quot;:[{&quot;saturation&quot;:-100},{&quot;gamma&quot;:1}]},{&quot;elementType&quot;:&quot;labels.text.stroke&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;off&quot;}]},{&quot;featureType&quot;:&quot;poi.business&quot;,&quot;elementType&quot;:&quot;labels.text&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;off&quot;}]},{&quot;featureType&quot;:&quot;poi.business&quot;,&quot;elementType&quot;:&quot;labels.icon&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;off&quot;}]},{&quot;featureType&quot;:&quot;poi.place_of_worship&quot;,&quot;elementType&quot;:&quot;labels.text&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;off&quot;}]},{&quot;featureType&quot;:&quot;poi.place_of_worship&quot;,&quot;elementType&quot;:&quot;labels.icon&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;off&quot;}]},{&quot;featureType&quot;:&quot;road&quot;,&quot;elementType&quot;:&quot;geometry&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;simplified&quot;}]},{&quot;featureType&quot;:&quot;water&quot;,&quot;stylers&quot;:[{&quot;visibility&quot;:&quot;on&quot;},{&quot;saturation&quot;:50},{&quot;gamma&quot;:0},{&quot;hue&quot;:&quot;#50a5d1&quot;}]},{&quot;featureType&quot;:&quot;administrative.neighborhood&quot;,&quot;elementType&quot;:&quot;labels.text.fill&quot;,&quot;stylers&quot;:[{&quot;color&quot;:&quot;#333333&quot;}]},{&quot;featureType&quot;:&quot;road.local&quot;,&quot;elementType&quot;:&quot;labels.text&quot;,&quot;stylers&quot;:[{&quot;weight&quot;:0.5},{&quot;color&quot;:&quot;#333333&quot;}]},{&quot;featureType&quot;:&quot;transit.station&quot;,&quot;elementType&quot;:&quot;labels.icon&quot;,&quot;stylers&quot;:[{&quot;gamma&quot;:1},{&quot;saturation&quot;:50}]}]
                  };
                  var mapElement = document.getElementById('&lt;?php echo esc_js( $gmap_id ); ?&gt;');
                  &lt;?php echo esc_js( $map_id ); ?&gt; = new google.maps.Map(mapElement, mapOptions);
  
                  &lt;?php echo esc_js( $owl_id ); ?&gt;.on('initialized.owl.carousel', function () {
                      transcargo_setMarkers();
                  });
  
                  &lt;?php echo esc_js( $owl_id ); ?&gt;.owlCarousel({
                      dotsContainer: '#&lt;?php echo esc_js( $owl_nav_id ); ?&gt;',
                      items: 3,
                      margin: 70,
                      responsive: {
                          0: {
                              items: 1
                          },
                          768: {
                              items: 2
                          },
                          980: {
                              items: 3
                          },
                          1199:{
                              items: 3
                          }
                      },
                      onTranslated: function () {
                          transcargo_setMarkers();
                      }
                  });
              }
              function transcargo_setMarkers(){
                  var latlngbounds = new google.maps.LatLngBounds();
                  markers = [];
                  &lt;?php echo esc_js( $owl_id ); ?&gt;.find('.owl-item.active').each(function (i) {
                      markers.push([parseFloat($(this).find('.item').data('lat')), parseFloat($(this).find('.item').data('lng')), $(this).find('.item').data('title')]);
                  });
                  for (i = 0; i &lt; gmarkers.length; i++) {
                      gmarkers[i].setMap(null);
                  }
                  for (var i = 0; i &lt; markers.length; i++) {
                      var marker_array = markers[i];
                      marker = new google.maps.Marker({
                          position: {lat: marker_array[0], lng: marker_array[1]},
                          icon: default_marker_icon,
                          map: &lt;?php echo esc_js( $map_id ); ?&gt;,
                          title: marker_array[2]
                      });
                      latlngbounds.extend(new google.maps.LatLng(marker_array[0], marker_array[1]));
                      gmarkers.push( marker );
                      addInfoWindow( marker, marker_array[2] );
                  }
                  &lt;?php echo esc_js( $map_id ); ?&gt;.fitBounds(latlngbounds);
                  
                  if( markers.length === 1 ) {
                      var listener = google.maps.event.addListener(&lt;?php echo esc_js( $map_id ); ?&gt;, &quot;idle&quot;, function() { 
                        &lt;?php echo esc_js( $map_id ); ?&gt;.setZoom(&lt;?php echo esc_js( $map_zoom ); ?&gt;); 
                        google.maps.event.removeListener(listener); 
                      });
                  }
  
                  google.maps.event.addListenerOnce(&lt;?php echo esc_js( $map_id ); ?&gt;, 'bounds_changed', function () {
                      offsetCenter(latlngbounds.getCenter(), 0, $(&quot;#&lt;?php echo esc_attr( $map_id ); ?&gt; .gmap_addresses&quot;).innerHeight());
                      if( /Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ){
                          &lt;?php echo esc_js( $map_id ); ?&gt;.setZoom(&lt;?php echo esc_js( $map_id ); ?&gt;.getZoom() - 4 );
                      }else{
                          &lt;?php echo esc_js( $map_id ); ?&gt;.setZoom(&lt;?php echo esc_js( $map_id ); ?&gt;.getZoom() - 1 );
                      }
                  });
              }
              function addInfoWindow(marker, title) {
  
                  var infowindow = new google.maps.InfoWindow({
                      content: '&lt;h6&gt;' + title + '&lt;/h6&gt;',
                      pixelOffset: new google.maps.Size(0,40)
                  });
  
                  google.maps.event.addListener(marker, 'mouseover', function () {
                      infowindow.open(&lt;?php echo esc_js( $map_id ); ?&gt;, marker);
                  });
  
                  google.maps.event.addListener(marker, 'mouseout', function () {
                      infowindow.close(&lt;?php echo esc_js( $map_id ); ?&gt;, marker);
                  });
  
              }
              function offsetCenter(latlng,offsetx,offsety) {
                  map = &lt;?php echo esc_js( $map_id ); ?&gt;;
                  var scale = Math.pow(2, map.getZoom());
                  var nw = new google.maps.LatLng(
                      map.getBounds().getNorthEast().lat(),
                      map.getBounds().getSouthWest().lng()
                  );
  
                  var worldCoordinateCenter = map.getProjection().fromLatLngToPoint(latlng);
                  var pixelOffset = new google.maps.Point((offsetx/scale) || 0,(offsety/scale) ||0)
  
                  var worldCoordinateNewCenter = new google.maps.Point(
                      worldCoordinateCenter.x - pixelOffset.x,
                      worldCoordinateCenter.y + pixelOffset.y
                  );
  
                  var newCenter = map.getProjection().fromPointToLatLng(worldCoordinateNewCenter);
  
                  map.setCenter(newCenter);
  
              }
          });
  </code></pre>