javascript - How can I display the address of my geocode in an info window? Google maps API - Stack Overflow

admin管理员组

文章数量:1410725

I am using geolocation to get the address of places on my google maps API by looking up the longitude and latitude and returning the results to my page for use in my database.

I have been unable to display these results in my infowindow in my map.

How can I using the code below include the address in my infowindow. It currently displays the long and lat with the following code:

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
infowindow.open(map, marker);

The function geocodePosition looks up the address of the coordinates and appends it to the html input in my form.

How can I adapt it to update the infowindow too. I have tried many methods now and no success. Any ideas??

<script type="text/javascript">
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 updateMarkerStatus(str) {
  document.getElementById('markerStatus').value = str;
}

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

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


function initialize() { 

  var latLng = new google.maps.LatLng(-34.397, 150.644);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });


  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Property location marker',
    map: map,
    draggable: true
  });

        var input = document.getElementById('searchTextField');
        var autoplete = new google.maps.places.Autoplete(input);
        var infowindow = new google.maps.InfoWindow();

        autoplete.bindTo('bounds', map);

google.maps.event.addListener(autoplete, 'place_changed', function() {
  var place = autoplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
  var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(35, 35));
  marker.setIcon(image);
  marker.setPosition(place.geometry.location);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

});

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

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

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

        //Show property address in window
    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

I am using geolocation to get the address of places on my google maps API by looking up the longitude and latitude and returning the results to my page for use in my database.

I have been unable to display these results in my infowindow in my map.

How can I using the code below include the address in my infowindow. It currently displays the long and lat with the following code:

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
infowindow.open(map, marker);

The function geocodePosition looks up the address of the coordinates and appends it to the html input in my form.

How can I adapt it to update the infowindow too. I have tried many methods now and no success. Any ideas??

<script type="text/javascript">
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 updateMarkerStatus(str) {
  document.getElementById('markerStatus').value = str;
}

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

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


function initialize() { 

  var latLng = new google.maps.LatLng(-34.397, 150.644);
  var map = new google.maps.Map(document.getElementById('mapCanvas'), {
    zoom: 8,
    center: latLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });


  var marker = new google.maps.Marker({
    position: latLng,
    title: 'Property location marker',
    map: map,
    draggable: true
  });

        var input = document.getElementById('searchTextField');
        var autoplete = new google.maps.places.Autoplete(input);
        var infowindow = new google.maps.InfoWindow();

        autoplete.bindTo('bounds', map);

google.maps.event.addListener(autoplete, 'place_changed', function() {
  var place = autoplete.getPlace();
  if (place.geometry.viewport) {
    map.fitBounds(place.geometry.viewport);
  } else {
    map.setCenter(place.geometry.location);
    map.setZoom(17);
  }
  var image = new google.maps.MarkerImage(
      place.icon, new google.maps.Size(71, 71),
      new google.maps.Point(0, 0), new google.maps.Point(17, 34),
      new google.maps.Size(35, 35));
  marker.setIcon(image);
  marker.setPosition(place.geometry.location);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

});

  // Update current position info.
  updateMarkerPosition(latLng);
  geocodePosition(latLng);

    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);

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

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

        //Show property address in window
    infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>'); 
    infowindow.open(map, marker);
  });
}

// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', initialize);
</script>

• javascript
• google-maps
• geolocation

Share Improve this question Follow asked Jan 11, 2012 at 1:37 hairynuggetshairynuggets 3,3212222 gold badges5757 silver badges9090 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

marker.getPosition() is not going to provide the street address. Given your current code, your best bet is to move:

infowindow.setContent('<div><strong>' + marker.getPosition()+ '</strong><br>');

to your geocodePosition() function, and then to pass the infowindow object as a second argument to that function.

So in your initialize() function you would modify calls to geocodePosition by including a second argument:

function initialize() {

...

  geocodePosition(marker.getPosition(), infowindow);

}

Then in your geocodePosition() function, you would accept the second argument, and update it with the responses[0].formatted_address value. I added variables to make it easier to pass on the values for address and the message.

function geocodePosition(pos, infowindow) {
  geocoder.geocode({
    latLng: pos
  }, function(responses) {
    if (responses && responses.length > 0) {
      var address = responses[0].formatted_address;      
      updateMarkerAddress(address);
      infowindow.setContent('<div><strong>' + address + '</strong><br>');

    } else {
      var msg = 'Cannot determine address at this location.';      
      updateMarkerAddress(msg);
      infowindow.setContent('<div><strong>' + msg + '</strong><br>');
    }
  });
} 

You might want to use Google map api - http://code.google./apis/maps/documentation/geocoding/#GeocodingRequests

There are others APIs that will give you the same - but most of them will cost money and with Google you get a lot of 'miles' for free.

本文标签： javascriptHow can I display the address of my geocode in an info window Google maps APIStack Overflow