I implemented a iframe with a Google Maps map, the problem is that I wanted to disable scrool zoom and drag . I've tried this code inside and outside the jQuery function and it does not work:
HTML:
<div id="map"></div>
JS:
var mapOptions = {
zoom: 17,
draggable: false,
center: new google.maps.LatLng(-34.397, 150.644),
zoomControl: false,
scrollwheel: false,
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
Here is a complete code that works the zoom lock:
<!doctype html>
<html lang="pt,BR">
<head>
<meta charset="UTF-8">
<title>API Google Maps V3</title>
<!-- Inicialização do mapa -->
<script>
function initialize() {
// Exibir mapa;
var myLatlng = new google.maps.LatLng(-8.0631495, -34.87131120000004);
var mapOptions = {
zoom: 17,
center: myLatlng,
panControl: false,
draggable: false,
zoomControl: false,
scrollwheel: false,
// mapTypeId: google.maps.MapTypeId.ROADMAP
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
}
}
// Exibir o mapa na div #mapa;
var map = new google.maps.Map(document.getElementById("mapa"), mapOptions);
// crio um objeto passando o array de estilos (styles) e definindo um nome para ele;
var styledMap = new google.maps.StyledMapType(styles, {
name: "Mapa Style"
});
// Aplicando as configurações do mapa
map.mapTypes.set('map_style', styledMap);
map.setMapTypeId('map_style');
}
// Função para carregamento assíncrono
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyDeHb17So0QupSGO_d6b8X-OyvJ32UQehs&sensor=true&callback=initialize";
document.body.appendChild(script);
}
window.onload = loadScript;
</script>
<style>
#mapa{
width: 100%;
height: 500px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="mapa"></div>
</body>
</html>
According to this answer and this comment in SOEN, you can not customize the behavior of maps used in embed mode. Your problem seems to be that you are trying to do both at the same time: insert the map into a iframe (embed) and create it from the JavaScript API.
Try replacing your iframe with a common%, empty%:
<div id="map"></div>
And then use your code as it is:
var mapOptions = {
//zoom: 17,
draggable: false,
zoomControl: false,
scrollwheel: false,
}
map = new google.maps.Map( document.getElementById("map"), mapOptions);
You will have to put additional parameters to specify where is being mapped, but API functions should work normally in this mode (I can not tell if div is required, or if it supports a default value, so I'm including it here commented).
For you to put that zoom control is false, first you have to specify the desired zoom target.
var mapOptions = {
zoom: 17, //Por exemplo
draggable: false,
zoomControl: false,
scrollwheel: false,
}
map = new google.maps.Map(document.getElementById("map"), mapOptions);
$(document).ready(function() {...
Try this:
map.getMinimumResolution=function() {
return 17;
};
map.getMaximumResolution=function() {
return 17;
};
If it does not work try adding this:
scaleControl: false,
map.disableScrollWheelZoom();