Google Maps API v3: Turning user input coordinates to latlng?

javascript html google-maps google-maps-api-3 maps

12,678

UPDATE:

The reason it wasn't working is because you have variable marker within the scope of initialize function and thus, moveMarker was not able to access the var marker. So, i went ahead and move the marker to the global scope by declaring it outside of all functions, and that way moveMarker can access and move the location of the marker. By doing so you'll have to drop the var declaration for the marker inside of initialization function.

marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    draggable: true
});

Keep in mind the modified code would only move the marker's position but would not center the map based on the marker. You'll have to call map.setCenter(); to center the map.

You need to parse out the numbers seperately and set it to type Number using parseFloat(). google.maps.LatLng() takes two Number parameters for Lat and Lng. A better way of doing this is to create two textfields.

<input type='text' id='markerLat' value='' />
<input type='text' id='markerLng' value='' />

One for lat and another for lng, and retrive the value with

var lat = parseFloat(document.getElementById('markerLat').value);

and

var lng = parseFloat(document.getElementById('markerLng').value);

You can create and set the marker by doing

var newLatLng = new google.maps.LatLng(lat, lng); 
marker.setPosition(newLatLng);

12,678

Author by

Yos Riady

I’m a software engineer living in Singapore. I make things for the web.

Updated on June 04, 2022

Comments

Yos Riady almost 2 years

I'm new with Google Maps. I'm trying to turn coordinates a user inputs to move a marker I have on my map to those coordinates. For instance, if the user inputs 50.75, 74.1 the marker will pan to that coordinate. Unfortunately, I couldn't get it to work. Here's my function:

function moveMarker() {
  var Markerloc = document.getElementById("Markerloc").value;
  var newLatlng = new google.maps.LatLng(Markerloc);
  marker.setPosition(newLatLng)
}

Here's my HTML code:

<input type="text" id= "Markerloc" value="Paste your coordinates" /> 
<input type="button" onclick="moveMarker()" value="Update Marker">

EDIT: I thought that'd fix it, but somehow, it still doesn't work.

Here's my code:

<script type="text/javascript">
var map;
var zoomLevel;

function initialize(){
 var myLatlng = new google.maps.LatLng(40.65, -74);
 var myOptions = {
 zoom: 2,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP,
}


var map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);
var zoomLevel = map.getZoom(); 

var marker = new google.maps.Marker({
 position: myLatlng,
 map: map,
 draggable: true
 });

 // Update current position info.
 updateMarkerPosition(myLatlng);

 // Add dragging event listeners.
 google.maps.event.addListener(marker, 'dragstart', function() {
 updateMarkerAddress('Dragging...');
});

 google.maps.event.addListener (map, 'zoom_changed', function() { 
 updateZoomLevel(map.getZoom()); 
 });

 google.maps.event.addListener(marker, 'drag', function() {
 updateMarkerStatus('Dragging...');
 updateMarkerPosition(marker.getPosition());
 });

 google.maps.event.addListener(marker, 'dragend', function() {
 updateMarkerStatus('Drag ended');
 geocodePosition(marker.getPosition());
 }); 
};

var geocoder = new google.maps.Geocoder();

function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      updateMarkerAddress(responses[0].formatted_address);
    } else {
      updateMarkerAddress('Cannot determine address at this location.');
    }
  });
} 

function updateZoomLevel(zoomLevel){
 document.getElementById('zoomLevel').innerHTML = zoomLevel;

}

function updateMarkerStatus(str) {
 document.getElementById('markerStatus').innerHTML = str;
}

function updateMarkerPosition(myLatlng) {
 document.getElementById('info').innerHTML = [
 myLatlng.lat(),
 myLatlng.lng()
 ].join(', ');
}

function updateMarkerAddress(str) {
  document.getElementById('address').innerHTML = str;
} 

function moveMarker() {
  var lat = parseFloat(document.getElementById('markerLat').value);
  var lng = parseFloat(document.getElementById('markerLng').value);
  var newLatLng = new google.maps.LatLng(lat, lng); 
  marker.setPosition(newLatLng)
} 


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

</script>
</head>
<body>

  <div id="map_canvas" style="width: 29%; height: 50%; float: left; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;"></div>
       <b>Zoom level: </b><div id="zoomLevel"> Scroll mousewheel</div>
    </div>
    <input type='text' id='markerLat' value='Target Latitude' />
    <input type='text' id='markerLng' value='Target Longitude' />
    <input type="button" onclick="moveMarker()" value="Move Marker">
</body>
</html>