how to update google map marker base on latitude and longitude from input field

Question

I have a textarea field that user can type or paste the address into and then I use google geocoder to convert those addresses into latitude and longitude and display them on the latitude and longitude form fields.Also the user can drag to relocate the marker for specific address. My problem here is after it converted into latitude and longitude, I want the google map marker update its location automatically on the default latitude and longitude. Here is the code for converting from address to latitude and longitude.

function getAddress() {
        var geocoder = new google.maps.Geocoder();
        var addr = document.getElementById('ClinicAddress').value;
        geocoder.geocode({'address': addr}, function (results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                var latitude = results[0].geometry.location.lat();
                var longitude = results[0].geometry.location.lng();
                document.getElementById('ClinicLatitude').value = latitude;
                document.getElementById('ClinicLongitude').value = longitude;
            }
        });
    }

and here is my code for dragging google map marker

function initialize() {
        var $latitude = document.getElementById('ClinicLatitude');
        var $longitude = document.getElementById('ClinicLongitude');
        //default latitude and longitude for Tokyo JP
        var latitude = 35.7061767;
        var longitude = 139.7340773;
        document.addEventListener('input', function() {
            if($latitude.value !== '' && $longitude.value !== '') {
                latitude = $latitude.value;
                longitude = $longitude.value;
                alert(latitude + "," + longitude);
            }
        });

        var zoom = 15;
        var LatLng = new google.maps.LatLng(latitude, longitude);
        var mapOptions = {
            zoom: zoom,
            center: LatLng,
            panControl: false,
            zoomControl: false,
            scaleControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);
        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            title: 'Drag to specify your address',
            draggable: true
        });

        google.maps.event.addListener(marker, 'dragend', function (marker) {
            var latLng = marker.latLng;
            $latitude.value = latLng.lat();
            $longitude.value = latLng.lng();
        });
    }
    initialize();

possible duplicate of [Is it possible to get the latitude and longitude of a draggable marker in a map (using javascript) into a form in HTML?](http://stackoverflow.com/questions/27156233/is-it-possible-to-get-the-latitude-and-longitude-of-a-draggable-marker-in-a-map) — geocodezip, Jun 08 '15 at 05:45
possible duplicate of [Add geocode long / lat to input field with event listener](http://stackoverflow.com/questions/12975553/add-geocode-long-lat-to-input-field-with-event-listener) — geocodezip, Jun 08 '15 at 05:46

score 1 · Answer 1 · answered Jun 08 '15 at 06:22

Ok, finally I found a solution for this. Any better solution is welcome.

    function getAddress() {
            var geocoder = new google.maps.Geocoder();
            var addr = document.getElementById('ClinicAddress').value;
            geocoder.geocode({'address': addr}, function (results, status) {
                if (status === google.maps.GeocoderStatus.OK) {
                    var latitude = results[0].geometry.location.lat();
                    var longitude = results[0].geometry.location.lng();
                    document.getElementById('ClinicLatitude').value = latitude;
                    document.getElementById('ClinicLongitude').value = longitude;
                    //call initialize to update new location with latitude and longitude
                    initialize(latitude,longitude);
                }
            });
        }

        //getting google map api on form
        function initialize(latitude,longitude) {
            var $latitude = document.getElementById('ClinicLatitude');
            var $longitude = document.getElementById('ClinicLongitude');
            //default latitude and longitude for Tokyo JP
            //var latitude = 35.7061767;
            //var longitude = 139.7340773;      
            var zoom = 15;
            var LatLng = new google.maps.LatLng(latitude, longitude);
            var mapOptions = {
                zoom: zoom,
                center: LatLng,
                panControl: false,
                zoomControl: false,
                scaleControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById('google_map'), mapOptions);
            var marker = new google.maps.Marker({
                position: LatLng,
                map: map,
                title: 'Drag to specify your address',
                draggable: true
            });

            google.maps.event.addListener(marker, 'dragend', function (marker) {
                var latLng = marker.latLng;
                $latitude.value = latLng.lat();
                $longitude.value = latLng.lng();
            });
        }
        //set default latitude and longitude
        initialize('35.7061767','139.7340773');

Mahad Asif · Answer 2 · 2023-07-15T15:29:15.143

I found this code right in order to update the marker using lats and lngs:

map = new google.maps.Map(document.getElementById(mapDivId), {
        center: {lat: parseFloat(lat_field.val()), lng: parseFloat(lng_field.val())},
        zoom: 5,
        streetViewControl: false,
        mapTypeId: 'roadmap'
    });

var latlng = new google.maps.LatLng(parseFloat(lat_field.val()), parseFloat(lng_field.val()));
var marker = new google.maps.Marker({position: latlng, map: map});
marker.setPosition(latlng);

Where lat_field and lng_field are the input fields. You may customize the other options while initializing the map object according to your scenario.

Thanks :)

how to update google map marker base on latitude and longitude from input field

2 Answers2