Disable Google Map Zoom
9 posts by 3 authors in: Forums > CMS Builder: Plugins & Add-ons
Last Post: January 23, 2014 (RSS)
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);
}
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
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 ?>
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
PHP Programmer - interactivetools.com
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
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!
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.
Tim (toledoh.com.au)
By nmsinc - January 23, 2014
Duh, I should have thought of that - that worked --- SORRY Big Time!