Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

update google map position via javascript

I can update the google map marker position but I cannot update the google map position. It does not centres the map to the latitude and longitude position given

var myLatlng;
var map;
var infowindow;
var latitude;
var longtitude;
var marker;

loadMap();
function loadMap()
{
    myLatlng = new google.maps.LatLng(54.91252, -1.37664);

    var mapOptions = {
        zoom: 17,
        center: myLatlng
    };

    map = new google.maps.Map(document.getElementById("googlemaps"), mapOptions);
    var contentString = '<h5>The Mew </h5>';

    infowindow = new google.maps.InfoWindow({
        content: contentString
    });

    marker = new google.maps.Marker({
        position: myLatlng,
        map: map,
        title: "The Mew",
        animation: google.maps.Animation.DROP
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map, marker);
    });
    infowindow.open(map, marker);
}

function updatePosition()
{
    latitude = document.getElementById('latitude');
    longtitude = document.getElementById('longtitude');
    myLatlng = new google.maps.LatLng(latitude, longtitude);
    marker.setPosition(myLatlng);
    map.setCenter(myLatlng);
}



  <input type="text" id="latitude" />
   <input type="text" id="longtitude" />
   <a onclick="updatePosition()" >update </a>
like image 235
meWantToLearn Avatar asked Mar 31 '26 05:03

meWantToLearn


2 Answers

In updatePosition the information you're assigning to latitude and longitude are the DOM nodes of those input fields but you want to assign the value of those inputs instead. Also, you need to ensure that the text you're grabbing from those values is converted to a number for LatLng to accept them properly. You can use parseInt for that. Don't forget the radix.

function updatePosition() {
  latitude = parseInt(document.getElementById('latitude').value, 10);
  longtitude = parseInt(document.getElementById('longtitude').value, 10);
  myLatlng = new google.maps.LatLng(latitude, longtitude);
  marker.setPosition(myLatlng);
  map.setCenter(myLatlng);
}
like image 83
Andy Avatar answered Apr 02 '26 17:04

Andy


You can use jQuery to get values of inputs

function updatePosition()
 {
   var lat= $('#latitude').val();
   var lng= $('#longtitude').val();
   myLatlng = new google.maps.LatLng(lat,lng);
   marker.setPosition(myLatlng);
   map.setCenter(myLatlng);
 } 

and in Javascript you have to use parseInt which will parse string and return a integer

  lat = parseInt(document.getElementById('latitude').value,10);
  lng = parseInt(document.getElementById('longtitude').value,10); 

FIDDLE DEMO

like image 23
Wit Wikky Avatar answered Apr 02 '26 19:04

Wit Wikky



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!