Wie kann man die Kartenbewegung stoppen, wenn man mit der Maus über den Marker in Google Map API 3 fährt?

Question

Ich zeige Infobox-Fenster, wenn Maus über Marker von Google Map, es funktioniert.

Aber Problem ist, dass, wenn ich mit der Maus über Marker Google Map Position bewegt sich mit der Maus über bestimmte Marker.

Ich möchte die Position von Google Map festlegen. Google Map bewegt sich nicht gemäß Marker.

Code:

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

Sie können eine Karte deaktivieren mit integrierten Methode setOptions Bewegen()

map.setOptions({draggable: false}); 

Answer 2

Versuchen Sie, diese disableAutoPan Option in Ihrem Code hinzuzufügen, um das Schwenken der Karte zu deaktivieren wenn Infowindow angezeigt wird.

disableAutoPan: true 

prüfen diese SO question für weitere Informationen.