Can't record the coordinates in the input box.



  • Using Google Map API, hit a little bit of a problem, I can't change the dataeg. Input♪ Created a marker that can be moved to the right place. I have the task of moving the marker to the right place, changing the coordinates. input♪ How do you do that? Or are there other alternative methods?

    On the page launch, input initial coordinates myCenter

    You can see how it works. ♪

    var map;
        var myCenter = new google.maps.LatLng(40.4092481, 49.8670721);
        function initialize() {
            var mapProp = {
                center: myCenter,
                zoom: 12,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    
        var marker = new google.maps.Marker({
            position: myCenter,
            draggable: true,
            title: "Передвинь меня!"
        });
        marker.setMap(map);
        var a = myCenter.lat();
        var b = myCenter.lng();
        document.add_point.latitude.value=a;
        document.add_point.longitude.value=b;
    
    }
    google.maps.event.addDomListener(window, 'load', initialize);</code></pre><pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form role="form" name="add_point" class="text-center"&gt;
    

    <div class="form-group">
    <label>Coordinates</label><br>
    LAT: <input class="coordinate form-control" id="lat" name="latitude" type="text"
    placeholder="You can select on map">
    LNG: <input class="coordinate form-control" id="lng" name="longitude" type="text"
    placeholder="You can select on map">
    </div>
    </form>
    <div class="center-block" id="googleMap" style="width:auto;height:500px; border-radius: 6px"></div>

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCyByXI8TPQnG5RpKPJ-ISSFFpcDpXhFoA"></script>

    How do we make sure that when the marker's place is changed, its coordinates are changed accordingly?



  • Sufficiently add to the process drag and dragend

    marker.addListener('drag', onDragOrDragend);
    marker.addListener('dragend', onDragOrDragend);
    

    Processor:

    function onDragOrDragend(e) {
        document.getElementById('lat').value = e.latLng.lat();
        document.getElementById('lng').value = e.latLng.lng();
    }
    

    Example code complete:

    var map;
    var myCenter = new google.maps.LatLng(40.4092481, 49.8670721);
    

    function initialize() {
    var mapProp = {
    center: myCenter,
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

    var marker = new google.maps.Marker({
    position: myCenter,
    draggable: true,
    title: "Передвинь меня!"
    });
    marker.setMap(map);
    marker.addListener('drag', onDragOrDragend);
    marker.addListener('dragend', onDragOrDragend);

    var a = myCenter.lat();
    var b = myCenter.lng();
    document.add_point.latitude.value = a;
    document.add_point.longitude.value = b;

    }

    function onDragOrDragend(e) {
    document.getElementById('lat').value = e.latLng.lat();
    document.getElementById('lng').value = e.latLng.lng();
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    <form role="form" name="add_point" class="text-center">
    <div class="form-group">
    <label>Coordinates</label><br> LAT: <input class="coordinate form-control" id="lat" name="latitude" type="text" placeholder="You can select on map"> LNG: <input class="coordinate form-control" id="lng" name="longitude" type="text" placeholder="You can select on map">
    </div>
    </form>
    <div class="center-block" id="googleMap" style="width:auto;height:500px; border-radius: 6px"></div>

    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCyByXI8TPQnG5RpKPJ-ISSFFpcDpXhFoA"></script>




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2