How to get latitude, longitude of search result marker with google maps javascript

Question

I'm trying the get latitude, longitude of the marker which shows up as search result the marker is draggable so I need to keep it update the latitude, longitude when user move the marker that's my code

function initialize() {

var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP});

var defaultBounds = new google.maps.LatLngBounds(
   new google.maps.LatLng(-33.8902, 151.1759),
   new google.maps.LatLng(-33.8474, 151.2631));
   map.fitBounds(defaultBounds);

var input = (document.getElementById('pac-input'));

var searchBox = new google.maps.places.SearchBox((input));

google.maps.event.addListener(searchBox, 'places_changed', function() {
  var places = searchBox.getPlaces();

  markers = [];
var bounds = new google.maps.LatLngBounds();
    for (var i = 0, place; place = places[i]; i++) {
      var image = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)};

map = new google.maps.Map(document.getElementById("map-canvas"));
    google.maps.event.addListener(map, 'click', function(event) {
      if (marker) {
         marker.setMap(null); 
         marker = null;}

document.getElementById('txtLat').value=event.latLng.lat();
document.getElementById('txtLng').value=event.latLng.lng();
var marker = new google.maps.Marker({
   animation: google.maps.Animation.DROP,
   map: map,
   title: place.name,
   draggable:true,
   position: place.geometry.location});
   markers.push(marker);

bounds.extend(place.geometry.location);}

map.fitBounds(bounds);});

google.maps.event.addListener(map, 'bounds_changed', function() {
   var bounds = map.getBounds();
   searchBox.setBounds(bounds);});}

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


  <input id="pac-input" class="controls" type="text" placeholder="Enter location">
  <div id="map-canvas"></div>

  <table >
   <tr><td><input type="text" id="txtLat" name="txtLat"style="width:150px"></td>
       <td><input type="text" id="txtLng" name="txtLng"style="width:150px"></td></tr>

  </table>

Answer 1

I can't debug your code without a working example, but here is my own version of what I believe you're trying to do.

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <script src='http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false'></script>
  </head>
  <body>
    <h1>MapAPI</h1>
    <div id="mapCon" style='height:512px;width:512px;'></div>
    <div id='output'></div>
    <script>
    //the API key is used by w3schools, it remains only as an example

      //assign map values
      var mapVal={
        center:new google.maps.LatLng(38,-78),
        zoom:7,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };

      //assign marker values
      var mark=new google.maps.Marker({
        draggable:true,
        position:new google.maps.LatLng(38,-78)
      });

      //define and place map and marker
      map=new google.maps.Map(document.getElementById('mapCon'),mapVal);
      mark.setMap(map);

      //keep updating incase the marker is moved
      function update(){
        //get coordinates directly from the marker
        output.innerHTML='Latitude: '+mark.position.k+'<br>Longitude: '+mark.position.A;
        //try to update at 60fps, stop if the window isnt in focus
        requestAnimationFrame(update);
      }

    google.maps.event.addDomListener(window,'load',update);
    </script>
  </body>
</html>

How to get latitude, longitude of search result marker with google maps javascript

Question

1 answers

solution1
0 2014-03-31 01:24:17

How to get latitude, longitude of search result marker with google maps javascript

Question

1 answers

solution1 0 2014-03-31 01:24:17

solution1
0 2014-03-31 01:24:17