update google map position via javascript

Question

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>

Possible duplicate of: http://stackoverflow.com/questions/2818984/google-map-api-v3-center-zoom-on-displayed-markers — edcs, May 07 '14 at 09:16
Don't just call `loadMap` directly. Instead add a google event listener for the window to load, which then calls it: `google.maps.event.addDomListener(window, 'load', loadMap);` — duncan, May 07 '14 at 09:28

score 6 · Accepted Answer · answered May 07 '14 at 09:19

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);
}

score 2 · Answer 2 · answered May 07 '14 at 09:27

2

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

answered May 07 '14 at 09:27

Wit Wikky

1,542
1
14
28

If the OP isn't using jQuery anywhere else in the code, why would they use it here? – Andy May 07 '14 at 09:32
JQuery is simply a specific library of JavaScript code and its so easy to use and extremely powerful. – Wit Wikky May 07 '14 at 10:10

update google map position via javascript

2 Answers2