Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

google maps, how to disable marker icons from being dragged around?

I have noticed that in most google maps you can not drag the marker icon into your address bar and see or download the icon .png file itself. Rather then you hover your cursor over the marker, you can see javascript:void(0).

How is that achieved? Thanks!

like image 715
Roger Travis Avatar asked Nov 30 '25 04:11

Roger Travis


1 Answers

It looks like markers in the v3 API cannot be dragged to the address bar, while markers in the v2 API can.

The following v3 example does not allow the marker to move around (tested in Firefox and Chrome). It also shows javascript:void(0) in the status bar:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API No Marker Dragging v3</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 2,
      center: new google.maps.LatLng(35.00, -25.00),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    new google.maps.Marker({
      position: map.getCenter(),
      map: map
    });

  </script>
</body>
</html>

Screenshot:

Google Maps API No Marker Dragging v3 http://img339.imageshack.us/img339/570/nodrag.jpg

On the other hand, the same example using the v2 API, allows the marker to be dragged to the address bar:

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
  <title>Google Maps API No Marker Dragging v2</title> 
  <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
          type="text/javascript"></script> 
</head> 
<body onunload="GUnload()">
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var map = new GMap2(document.getElementById("map"));
    map.setCenter(new GLatLng(35.00, -25.00), 2);
    map.addOverlay(new GMarker(map.getCenter()));
  </script>
</body>
</html>

Screenshot:

Google Maps API No Marker Dragging v2 http://img39.imageshack.us/img39/8330/yesdrag.jpg

like image 123
Daniel Vassallo Avatar answered Dec 02 '25 16:12

Daniel Vassallo