マーカー上にマウスを置いたときにマップの移動を停止する方法Google Map API 3では？

Question

Google Mapのマーカー上にマウスを置くと、Infoboxウィンドウが表示されます。

しかし問題は、Marker Google Mapの上にマウスを置くと、特定のマーカー上にマウスオーバーすると問題が発生することです。

私はGoogleマップの位置を固定したいと思います。 Google MapはMarkerに従って移動しません。

コード：

google.maps.event.addDomListener(window, 'load', function(){ 
     var radius = null; 
     var i; 
     var markers_on_map = []; 
     directionsService = new google.maps.DirectionsService(); 
     directionsDisplay = new google.maps.DirectionsRenderer(); 
     var markingposition = new google.maps.LatLng(26.9142853,75.7498689); 
     var bounds = new google.maps.LatLngBounds(); 
     var mapoptions = { 
      zoom:14, 
      center: markingposition 
     }; 
     var map = new google.maps.Map(document.getElementById('mapcan'), mapoptions); 
     var marker = new google.maps.Marker({ 
      position: markingposition , 
      animation: google.maps.Animation.DROP, 
      map: map 
     }); 


     directionsDisplay.setMap(map); 
     directionsDisplay.setPanel(document.getElementById("dvPanel")); 

      //all_locations is just a sample, you will probably load those from database 
      var all_locations = [ 
      {type: "restaurant", name: "Restaurant 1", lat: 26.9128297, lng: 75.7495007}, 
      {type: "school", name: "Kotak Mahindra Bank Ltd", lat: 26.9090936, lng: 75.7446262}, 
      {type: "school", name: "Jagdamba Tower", lat: 26.9118107, lng: 75.7451139}, 
      {type: "restaurant", name: "Water Tank", lat: 26.909608, lng: 75.749964}, 
      {type: "school", name: "Shree Thal", lat: 26.9078141, lng: 75.7485584} 
      ]; 


      for(i=0; i<all_locations.length; i++) 
      { 
      var lat = all_locations[i]['lat']; 
      var long = all_locations[i]['lng']; 
      latlngset = new google.maps.LatLng(lat, long); 
      console.log(lat+'--'+long); 
      var marker = new google.maps.Marker({ 
       position: latlngset, 
       map: map 
      }); 
      marker.id = { name: all_locations[i]['name'] , address : "Dobbe 63<br/>8032 JX Zwolle", tel : "" }; 
      attachMessage(marker,latlngset); 
      map.setCenter(marker.getPosition()); 
      } 

     /* 
     marker is a JavaScript object so i'll be taking that advantage and adding a custom attribute to the marker 
     object. this can be used to make dayanamic info window according to the values containing in the marker.id attribute 
     */ 
     marker.id = { name: "Precize Property" , address : "Dobbe 63<br/>8032 JX Zwolle", tel : "" }; 
     attachMessage(marker,markingposition); 

     // Create Cicle Around your location 
     var circle = new google.maps.Circle({ 
       center: markingposition, 
       map: map, 
       radius: 1000,   // IN METERS. 
       strokeColor: "#90bde5", 
       strokeOpacity: 1, 
       strokeWeight: 1, 
       fillColor: "#55a6ed", 
       fillOpacity: .2, 
      }); 

     $('#radius_km').change(function(event) { 
      radius = $(this).val(); 
      console.log(radius); 
      var circle = new google.maps.Circle({ 
       center: markingposition, 
       map: map, 
       radius: radius_km * 1000,   // IN METERS. 
       strokeColor: "#90bde5", 
       strokeOpacity: 1, 
       strokeWeight: 1, 
       fillColor: "#55a6ed", 
       fillOpacity: .2, 
      }); 
     }); 

    }); 
    /* 
    creating an infobox object, most of the attributes are self explanatory, for more info about infobox options read 
    http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/docs/examples.html 
    */ 
    infobox = new InfoBox({ 
     disableAutoPan: false, 
     maxWidth: 150, 
     pixelOffset: new google.maps.Size(-140, 0), 
     zIndex: null, 
     boxStyle: { 
        // top arrow in the info window 
        background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat", 
        opacity: 0.9, 
        width: "300px" 
      }, 
     closeBoxMargin: "12px 4px 2px 2px", 
     closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", //close button icon 
     infoBoxClearance: new google.maps.Size(1, 1) 
    }); 


    function attachMessage(marker,Latlng) { 
     //adding click listener to the marker 
     google.maps.event.addListener(marker, 'mouseover', function(evt) { 

     var newob = $(".inwrapper"); 
     newob.find("#namexpopup").html(this.id.name); 
     newob.find("#addresspopup").html(this.id.address); 
    // newob.find("#callapopup").attr("href","tel:"+this.id.tel); 
     console.log(newob.html()); 
     infobox.setContent(newob.html()); 
     infobox.open(marker.get('map'), this); 
     marker.get('map').panTo(Latlng); 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
     }); 

     google.maps.event.addListener(marker, 'mouseout', function(evt) { 
     infobox.close(); 
     }); 
    } 

    function calcRoute(){ 
     console.log('route'); 
     calculateAndDisplayRoute(directionsService, directionsDisplay); 
    } 

    function calculateAndDisplayRoute(directionsService, directionsDisplay) { 
     var start = '26.9142853,75.7498689'; 
     var end = document.getElementById('start').value; 
     directionsService.route({ 
      origin: start, 
      destination: end, 
      travelMode: google.maps.TravelMode.DRIVING 
     }, function(response, status) { 
      if (status === google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } else { 
       window.alert('Directions request failed due to ' + status); 
      } 
     }); 
    } 

Answer 1

あなたは組み込みの方法はsetOptions（で移動マップを無効にすることができます）

map.setOptions({draggable: false}); 

Answer 2

マップのパンを無効にするには、あなたのコード内でこのdisableAutoPanオプションを追加してみてくださいインフォ画面が表示されます。

disableAutoPan: true 

詳細については、SO questionをご確認ください。