JavaScript Googleマッププレイスを移動します

Question

次のJavaScriptを使用してGoogleマップを読み込み、ロンドンに中心を置いています。ユーザーはマップを移動してマーカーを配置し、経度と緯度を保存することができます。このコードはうまくいきます。

$(document).ready(function() { 
    var myLatLng = {lat: 51.5073509, lng: -0.12775829999998223}; 

    function initialize() { 
     var mapOptions = { 
      center: new google.maps.LatLng(myLatLng), 
      zoom: 13 
     }; 
     var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

     var input = /** @type {HTMLInputElement} */(
      document.getElementById('pac-input')); 

      var types = document.getElementById('type-selector'); 
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(input); 
      map.controls[google.maps.ControlPosition.TOP_LEFT].push(types); 

      var autocomplete = new google.maps.places.Autocomplete(input); 
      autocomplete.bindTo('bounds', map); 

      var infowindow = new google.maps.InfoWindow(); 
      var marker = new google.maps.Marker({ 
       draggable: true, 
       map: map, 
       anchorPoint: new google.maps.Point(myLatLng) 
      }); 

      google.maps.event.addListener(marker, "mouseup", function(event) { 
       $('#id_latitude').val(this.position.lat()); 
       $('#id_longitude').val(this.position.lng()); 
      }); 

      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       infowindow.close(); 
       marker.setVisible(false); 
       var place = autocomplete.getPlace(); 
       if (!place.geometry) { 
        return; 
       } 

       // If the place has a geometry, then present it on a map. 
       if (place.geometry.viewport) { 
        map.fitBounds(place.geometry.viewport); 
       } else { 
        map.setCenter(place.geometry.location); 
        map.setZoom(17); 
       } 
       marker.setIcon(/** @type {google.maps.Icon} */({ 
        url: place.icon, 
        size: new google.maps.Size(71, 71), 
        origin: new google.maps.Point(0, 0), 
        anchor: new google.maps.Point(17, 34), 
        scaledSize: new google.maps.Size(35, 35) 
       })); 
       marker.setPosition(place.geometry.location); 
       marker.setVisible(true); 

       $('#id_latitude').val(place.geometry.location.lat()); 
       $('#id_longitude').val(place.geometry.location.lng()); 

       var address = ''; 
       if (place.address_components) { 
        address = [ 
        (place.address_components[0] && place.address_components[0].short_name || ''), 
        (place.address_components[1] && place.address_components[1].short_name || ''), 
        (place.address_components[2] && place.address_components[2].short_name || '') 
        ].join(' '); 
       } 

       infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address); 
       infowindow.open(map, marker); 
      }); 
     } 

     if ($('#map-canvas').length != 0) { 
      google.maps.event.addDomListener(window, 'load', initialize); 
     } 

    }); 

は、私は、ユーザーの情報を再ロードするとき、それは自動的に、彼らはセットのマーカーに行くと、彼らは別の場所に移動できるようにコードを修正します。私はこれを行う方法を解決することはできません。助けてください。

Answer 1

まず、マーカーの位置を変更するには、マーカーオブジェクトを作成した後にグローバル変数として保持して、initializeの外のどこかでマーカーオブジェクトを編集できるようにする必要があります。

そして、あなたは、ユーザーの情報をリロードした後、あなたはマーカーの位置をこのように変更することができます。

var latlng = new google.maps.LatLng(-24.397, 140.644); // new latlng here. 
marker.setPosition(latlng); // marker is what you keeped global. 

それはコールバックや、このような何かをサポートしている場合、私は、Djangoフレームワークについて何も知りません、そこで変更作業を行います。

var markerGlobal; 
 

 
function initMap() { 
 
    var myLatLng = { 
 
    lat: -25.363, 
 
    lng: 131.044 
 
    }; 
 

 
    var map = new google.maps.Map(document.getElementById('map'), { 
 
    zoom: 4, 
 
    center: myLatLng 
 
    }); 
 

 
    var marker = new google.maps.Marker({ 
 
    position: myLatLng, 
 
    draggable: true, 
 
    map: map, 
 
    title: 'Hello World!' 
 
    }); 
 
    markerGlobal = marker; 
 
} 
 

 
function changeMarkerPosition() { 
 
    var newLatlng = new google.maps.LatLng(-24.397, 131.084); 
 
    markerGlobal.setPosition(newLatlng); 
 
}

html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#map { 
 
    height: 100%; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
 
    <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 
    <div> 
 
    <button onclick="changeMarkerPosition()">Click me!</button> 
 
    </div> 
 
    <div id="map"></div> 
 

 
    <script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script> 
 
</body> 
 

 
</html>