Question

I have implemented a styled google map into my website, when I view the page on an iphone it locks the zoom level of the web page. The “map” is still “pinchable” to zoom but the webpage is not.. I can’t work out how to turn on the pinch zoom for the webpage and the map?
Thanks in advance any helpers! Here’s a link to the page – http://esdaledesigns.com/contact.php

   <script type="text/javascript">
      function initialize() {


          // Create an array of styles.
  var styles = [
  {
    "stylers": [
      { "hue": "#ff6e00" },
      { "saturation": -67 }
    ]
    }
  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "The Stockwell"});

  // Create a map object, and include the MapTypeId to add
  // to the map type control.
  var mapOptions = {
    zoom: 16,
    center: new google.maps.LatLng(51.890488, 0.899154),
    mapTypeControlOptions: {
      mapTypeIds: ['map_style'], 
    },
  };
  var map = new google.maps.Map(document.getElementById('map_canvas'),
    mapOptions);

  var myLatlng = new google.maps.LatLng(51.890488, 0.899154);
  var marker = new google.maps.Marker({
      position: myLatlng,
      animation: google.maps.Animation.DROP,
      map: map,
      title:"The Stockwell"
  });

  //information
  var contentString = '<div id="content">'+
    '<div id="siteNotice">'+
    '</div>'+
    '<h2 id="firstHeading" class="firstHeading">The Stockwell Colchester</h2>'+
    '<div id="bodyContent">'+
    '<p>THE STOCKWELL<br />18 WEST STOCKWELL STREET<br />COLCHESTER<br />ESSEX<br />CO1 1HN<br /></p>'+
    '</div>'+
    '</div>';

var infowindow = new google.maps.InfoWindow({
    content: contentString
});


google.maps.event.addListener(marker, 'click', function() {
  infowindow.open(map,marker);
});


//Associate the styled map with the MapTypeId and set it to display.
  map.mapTypes.set('map_style', styledMap);
  map.setMapTypeId('map_style');
}
    </script>

Answer 1

ok, worked it out….

It was this bit of code a few lines above the script I posted, just above the google api key. <meta name="viewport" content="initial-scale=2.0, user-scalable=no" /> I changed user-scalable to “yes” and initial-scale to “0.5” and everything is working correctly.
Hope this helps someone else.