Google Maps API v3: Turning user input coordinates

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>

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.

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

Google Maps API v3: Turning user input coordinates

问题:

回答1:

收藏的人(0)

Google Maps API v3: Turning user input coordinates

问题:

回答1:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮