Skip to content Skip to sidebar Skip to footer

Google Maps Api V3: Turning User Input Coordinates To Latlng?

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 mark

Solution 1:

Here is the JSFiddle Demo:

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.

<inputtype='text'id='markerLat' value='' />
<inputtype='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);

Post a Comment for "Google Maps Api V3: Turning User Input Coordinates To Latlng?"