I have two questions. First, I want to put markers in my Google map with buttons, but I have no idea where my fault is. And second, my map should be only draggable on zoom level 16. I hope someone can help me with my problems. And here is my code.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.502648,13.529278);
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.502648, 13.529278),
minZoom: 15,
maxZoom: 16
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.50, 13.525),
new google.maps.LatLng(52.506, 13.534)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Listen for the dragend event
google.maps.event.addListener(map, 'bounds_changed', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.4952, 13.5189),
new google.maps.LatLng(52.51, 13.53957)
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(52.503971,13.52073),
map:map,
title:"Hello World!"
});
marker.setMap(map);
var groundoverlay = new google.maps.GroundOverlay('pics/karte2.png', imageBounds);
groundoverlay.setMap(map);
groundoverlay.setOpacity(1);
}
var wcs = [
['Klo1', 52.504971, 13.52063, 1],
['Klo2', 52.504071, 13.53023, 2],
];
var gastro = [
['Cafeteria', 52.504541,13.529014, 1],
['Imbiss', 52.500121,13.532913, 2],
];
function setMarkers(map,locations){
for (var i=0; i < locations.length; i++) {
var loc = locations[i];
var locLatLng = new google.maps.LatLng(loc[1], loc[2]);
var locmarker = new google.maps.Marker({
position:locLatLng,
map:map,
title: loc[0],
zIndex: loc[3]
});
};
locmarker.setMap(map);
}
/*google.maps.event.addListener(map, 'zoom_changed', function() {
if (map.zoom!=15){map.setOptions({draggable:true});}
else map.setOptions({draggable:false});
});*/
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:480px; height:560px"></div>
<form name="Test" action="">
<input type="button" value="WCs" onclick="setMarkers(map,wcs)">
<input type="button" value="Gastro" onclick="setMarkers(map,gastro)">
</form>
</body>
</html>
I added some code into your code. Please check differences.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(52.502648,13.529278);
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.502648, 13.529278),
minZoom: 15,
maxZoom: 16
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var strictBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.50, 13.525),
new google.maps.LatLng(52.506, 13.534)
);
// Listen for the dragend event
google.maps.event.addListener(map, 'dragend', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
// Listen for the dragend event
google.maps.event.addListener(map, 'bounds_changed', function() {
if (strictBounds.contains(map.getCenter())) return;
// We're out of bounds - Move the map back within the bounds
var c = map.getCenter(),
x = c.lng(),
y = c.lat(),
maxX = strictBounds.getNorthEast().lng(),
maxY = strictBounds.getNorthEast().lat(),
minX = strictBounds.getSouthWest().lng(),
minY = strictBounds.getSouthWest().lat();
if (x < minX) x = minX;
if (x > maxX) x = maxX;
if (y < minY) y = minY;
if (y > maxY) y = maxY;
map.setCenter(new google.maps.LatLng(y, x));
});
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(52.4952, 13.5189),
new google.maps.LatLng(52.51, 13.53957)
);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(52.503971,13.52073),
map:map,
title:"Hello World!"
});
google.maps.event.addListener(map, "zoom_changed", function() {
marker.setDraggable(map.getZoom() == 16);
})
//var groundoverlay = new google.maps.GroundOverlay('pics/karte2.png', imageBounds);
//groundoverlay.setMap(map);
//groundoverlay.setOpacity(1);
var wcBtn = document.getElementById("btn_WCs");
google.maps.event.addDomListener(wcBtn, "click", function() {
setMarkers(map,wcs);
});
var gastroBtn = document.getElementById("btn_Gastro");
google.maps.event.addDomListener(gastroBtn, "click", function() {
setMarkers(map,gastro);
});
}
var wcs = [
['Klo1', 52.504971, 13.52063, 1],
['Klo2', 52.504071, 13.53023, 2],
];
var gastro = [
['Cafeteria', 52.504541,13.529014, 1],
['Imbiss', 52.500121,13.532913, 2],
];
function setMarkers(map,locations){
for (var i=0; i < locations.length; i++) {
var loc = locations[i];
var locLatLng = new google.maps.LatLng(loc[1], loc[2]);
var locmarker = new google.maps.Marker({
position:locLatLng,
map:map,
title: loc[0],
zIndex: loc[3]
});
};
locmarker.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:480px; height:560px"></div>
<form name="Test" action="">
<input type="button" value="WCs" id="btn_WCs">
<input type="button" value="Gastro" id="btn_Gastro" >
</form>
</body>
</html>
You can specify "draggable" property:
var myOptions = {
zoom: 15,
center: latlng,
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: new google.maps.LatLng(52.502648, 13.529278),
minZoom: 15,
maxZoom: 16,
draggable : false
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
And this:
google.maps.event.addListener(map, "zoom_changed", function() {
map.setOptions({
draggable : map.getZoom() == 16
});
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.