Disable Google Map Zoom

By nmsinc - January 21, 2014

Hello,

I'm trying to disable Google Map Zoom below with no luck - any suggestions? - Thanks NMSINC

function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
    var mapOptions = {
    zoom: 4,
    scrollwheel: false,
    zoomControl: false    
    }
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var image        = "<?php echo $pointerUrl3; ?>man.png";
    var marker       = new google.maps.Marker({ map: map, position: latLng, icon:image });
    google.maps.event.addListener(marker, 'click', function() {
    });
    bounds.extend(latLng);
  }

nmsinc

By gregThomas - January 23, 2014

Hi Nmsinc,

I think the problem is that you're applying these options to the map marker, as opposed to the map. I did some local testing and was able to disable zooming on the sample_map_multi.php example map that comes with geocoder plugin using this code:

<!-- STEP1: Map with multiple addresses: Put this in the <head> of your page, rename $myRecords if needed -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map_canvas';
  var mapOptions  = { 
    mapTypeId:   google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    zoomControl: false     
  };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();

<?php
foreach ($myRecords as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

  //
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var marker       = new google.maps.Marker({ map: map, position: latLng });
    google.maps.event.addListener(marker, 'click', function() {
      if (infowindowEl) {
        infowindow.setContent(infowindowEl.innerHTML);
        infowindow.open(map, marker);
      }
      else {
        window.location = detailLink;
      }
    });
    bounds.extend(latLng);
  }

  //
  map.fitBounds(bounds);
}

</script>

The changes I've made I've highlighted in green. So instead of passing the mapOptions variable into the marker, they're passed into the map initialize function.

Let me know if you have any questions!

Cheers!

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By nmsinc - January 23, 2014

Hi Greg,

Was not able to get it to work - here is the full code below:

<!-- STEP1: Map with multiple addresses: Put this in the <head> of your page, rename $myRecords if needed -->
<script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
  var mapCanvasId = 'map_canvas';
  var mapOptions  = {
    mapTypeId:   google.maps.MapTypeId.ROADMAP,
    scrollwheel: false,
    zoomControl: false    
  };
  var map         = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
  var bounds      = new google.maps.LatLngBounds();
  var infowindow  = new google.maps.InfoWindow();

<?php foreach ($myRecords as $record) {
  if (!$record['latitude'] || !$record['longitude']) { continue; }
  $jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "'";
  print "  _geocoder_addMarker($jsFunctionArgs);\n";
}
?>
<?if(@$_SERVER["HTTPS"] == "on"){
    $pointerUrl = "https://chart.googleapis.com/";
    $pointerUrl2 = "https://maps.google.com/mapfiles/kml/paddle/";
    $pointerUrl3 = "https://maps.google.com/mapfiles/ms/micons/";
  }else{
    $pointerUrl = "http://chart.apis.google.com/";
    $pointerUrl2 = "http://maps.google.com/mapfiles/kml/paddle/";
    $pointerUrl3 = "http://maps.google.com/mapfiles/ms/micons/";
  }
?>
 
  //
  function _geocoder_addMarker(latitude, longitude, recordNum, detailLink) {
    var latLng       = new google.maps.LatLng(latitude, longitude);
    var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
    var image        = "<?php echo $pointerUrl3; ?>man.png";
    var marker       = new google.maps.Marker({ map: map, position: latLng, icon:image });
    //var marker       = new google.maps.Marker({ map: map, position: latLng });
    google.maps.event.addListener(marker, 'click', function() {
    });
    bounds.extend(latLng);
  }

  //
  map.fitBounds(bounds);
}

</script>
<!-- STEP1: Map with multiple addresses -->


</head>


<!-- STEP2: Map with multiple addresses: add this to body tag: onload="initialize() -->
<body onload="initialize()">
<!-- STEP2: Map with multiple addresses -->

<center>
  <h2>Join The Fastest Growing Claims Management Service NOW!<br>CALL 308-760-3367 to get started or to schedule a FREE Online Demo And A FREE Ten Day Trial!</h2>
</center>

  <!-- STEP3: Map with multiple addresses: Put this where you want your map displayed, rename $myRecords if needed -->
  <?php $hasAddresses = array_filter(array_pluck($myRecords, 'latitude')); ?>
  <?php if ($hasAddresses): ?>
    <div id="map_canvas" style="width: 575px; height: 380px; float: left; margin: 0px 15px;"></div>
  <?php endif ?>
 
  <?php if (!$hasAddresses): ?>
    <div style="width: 575px; height: 380px; float: left; margin: 0px 15px; border: 1px solid #000;">
      <div style="text-align: center; padding-top: 135px">
          No map available!
      </div>
    </div>
  <?php endif ?>

nmsinc

By gregThomas - January 23, 2014

Hi nmsinc,

I can't see anything wrong with your code, do you have a link to the page so that I can take a look? Are you getting any errors? Or is it just that the scroll bar still appears on the page?

Thanks,

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By gregThomas - January 23, 2014

Hi nmsinc,

It's working correctly for me:

http://awesomescreenshot.com/0af28zjk1f

I was unable to zoom in or out either. Have you tried doing full refresh of the page (ctrl+F5)?

Cheers,

Greg

Greg Thomas







PHP Programmer - interactivetools.com

By nmsinc - January 23, 2014

I did a the f-5 refresh and the scroll has been locked out, however, when I double click inside the map, it still zooms in!

nmsinc

By Toledoh - January 23, 2014

Just a thought.

Have a play with http://googlemapbuilder.mynameisdonald.com/ then generate the code to see what it produces.

There is an option for Zoom Control, as well as Double Click to Zoom and Mouse Wheel to Zoom. 

Cheers,

Tim (toledoh.com.au)