Home/ Questions/Q 8999405
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T00:10:33+00:00

I have two questions. First, I want to put markers in my Google map

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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
  });
})
    • 0