title: changing zoom for mobile on google maps
body: <p>I have a script for google maps that has <code>zoom</code> set at a certain distance for desktop browsers. I was wondering if there's away to have a different zoom when being viewed on mobile device.</p>
  
  <p>I think it can be done with a <code>if</code> statement but I'm not sure how I would integrate it into the script. I'm not that comfortable with jquery and would appreciate any help.</p>
  
  <p>script is:</p>
  
  <pre><code>  &lt;script&gt;
          window.onload = function () {
  
              var latlng = new google.maps.LatLng(51.523612, -0.125816);
  
              var styles = [{
                  "stylers": [{
                      "saturation": -100
                  }, {
                      "hue": "#ff0000"
                  }, {
                      "gamma": 0.92
                  }]
              }, {
                  "featureType": "poi",
                  "stylers": [{
                      "visibility": "off"
                  }]
              }, {
                  "elementType": "geometry.fill",
                  "stylers": [{
                      "gamma": 0.85
                  }]
              }, {}]
  
              var myOptions = {
                  zoom: 17,
                  center: latlng,
                  mapTypeId: google.maps.MapTypeId.ROADMAP,
                  disableDefaultUI: true,
                  scrollwheel: false,
                  draggable: false,
                  styles: styles
  
              };
  
              map = new google.maps.Map(document.getElementById('map'), myOptions);
              var marker = new google.maps.Marker({
                  position: latlng,
                  map: map,
  
              });
              marker.setMap(map);
          }
      &lt;/script&gt;
  </code></pre>