update google map position via javascript - Stack Overflow

admin管理员组

文章数量:1289834

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>

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>

• javascript
• google-maps
• google-maps-api-3

Share Improve this question Follow asked May 7, 2014 at 9:10 meWantToLearnmeWantToLearn 1,70022 gold badges2525 silver badges4747 bronze badges 3

• Possible duplicate of: stackoverflow./questions/2818984/… – edcs Commented May 7, 2014 at 9:16
• 1 @edcs plz read the question. They are different questions – meWantToLearn Commented May 7, 2014 at 9:18
• 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 Commented May 7, 2014 at 9:28

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

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

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

本文标签： update google map position via javascriptStack Overflow