stackoom
  简体   繁体   中英

How to get latitude and longitude from google maps v3 api?

 原文  2013-03-14 18:17:21  3   6    javascript/ google-maps/ google-maps-api-3

Question

I am trying create a map using google maps v3 api. I have found the below code over internet and I want to show the latitude and logitude in map window instead of address. 

<script>
      function initialize() {
        var mapOptions = {
          center: new google.maps.LatLng(-33.8688, 151.2195),
          zoom: 13,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById('map_canvas'),
          mapOptions);

        var input = document.getElementById('searchTextField');
        var autocomplete = new google.maps.places.Autocomplete(input);

        autocomplete.bindTo('bounds', map);

        var infowindow = new google.maps.InfoWindow();
        var marker = new google.maps.Marker({
          map: map
        });

        google.maps.event.addListener(autocomplete, 'place_changed', function() {
          infowindow.close();
          marker.setVisible(false);
          input.className = '';
          var place = autocomplete.getPlace();
          if (!place.geometry) {
            // Inform the user that the place was not found and return.
            input.className = 'notfound';
            return;
          }

          // If the place has a geometry, then present it on a map.
          if (place.geometry.viewport) {
            map.fitBounds(place.geometry.viewport);
          } else {
            map.setCenter(place.geometry.location);
            map.setZoom(17);  // Why 17? Because it looks good.
          }
          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(35, 35)
          };
          marker.setIcon(image);
          marker.setPosition(place.geometry.location);
          marker.setVisible(true);

          var address = '';
          if (place.address_components) {
            address = [
              (place.address_components[0] && place.address_components[0].short_name || ''),
              (place.address_components[1] && place.address_components[1].short_name || ''),
              (place.address_components[2] && place.address_components[2].short_name || '')
            ].join(' ');
          }

          infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
          infowindow.open(map, marker);
        });

Please some one help me to get and show latitude and longitude. Thank you very much.

6 answers

solution1
 11 ACCPTED  2013-03-14 18:29:27

Where you have 

  var address = '';
  if (place.address_components) {
    address = [
      (place.address_components[0] && place.address_components[0].short_name || ''),
      (place.address_components[1] && place.address_components[1].short_name || ''),
      (place.address_components[2] && place.address_components[2].short_name || '')
    ].join(' ');
  }

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

Change the infowindow line to read 

  infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + place.geometry.location.lat() + ',' + place.geometry.location.lng());

solution2
 9  2013-11-11 05:26:17

Much simpler solution will be : 

var address = "New Delhi"
$.ajax({
  url:"http://maps.googleapis.com/maps/api/geocode/json?address="+address+"&sensor=false",
  type: "POST",
  success:function(res){
     console.log(res.results[0].geometry.location.lat);
     console.log(res.results[0].geometry.location.lng);
  }
});

Cheers

solution3
 7  2013-11-08 06:33:41

Take a look at this code.. 

<!DOCTYPE html>
<html>
<head>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
    <script>
        function initialize() {
        var address = 'Kolkata';
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({
            'address': address
            }, function(results, status) {      
                var lat=document.getElementById("lat").innerHTML=results[0].geometry.location.lat();    
                var lng=document.getElementById("lng").innerHTML=results[0].geometry.location.lng();        
            });
        }
        google.maps.event.addDomListener(window, 'load', initialize);
    </script>
</head>
<body>
    <p id="lat"></p> 
    <p id="lng"></p> 
</body>
</html>

solution4
 2  2013-08-07 14:18:20

Looks like you might be looking for just regular geolocation stuff? Here's my snippett from a project to grab a user's lat/long

trigger show_user_location(); to begin the geolocation API. 

function show_user_location(){ 

    navigator.geolocation.getCurrentPosition(display_user_location, error_response); 
} 
function display_user_location(user_position){ 
    var lat = user_position.coords.latitude; 
    var lon = user_position.coords.longitude; 

// once we get here make that AJAX query
// #loc.value="<p>Your latitude is: "+lat+", your longitude is: "+lon+"</p>"+ "<p><a href='http://maps.google.com/?q="+lat+","+lon+"'>View your location on Google Maps</a></p>";

    // I often put the lat/lon in a hidden form for later retrieval here.
    // value = document.getElementById('lat').value;
    // value = document.getElementById('lat').value;

    document.getElementById("lat").value = lat;
    document.getElementById("long").value = lon;

}

solution5
 1  2017-01-20 11:00:38

When you want the lat and long of any part of the map,try adding the click listeners for the map not the marker. The code should be something like below: 

var infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);

    service.getDetails({
        placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4'
    },function(place,status){
        if(status === google.maps.places.PlacesServiceStatus.OK)
        {
            var marker = new google.maps.Marker({
                map:map,
                position: place.geometry.location

            });

        google.maps.event.addListener(map, 'click', function(e) {
          infowindow.setContent('<div>'+'Longitute'+'<strong>' + e.latLng.lng() + '</strong><br>' +
            'Latitude:'+'<strong>' + e.latLng.lat()+'</strong>'  + '</div>');
          infowindow.open(map, this);
        });
        }
    });

This will display the lat and long of any location on the map using a info window.

solution6
 0  2019-11-27 12:20:41

I created a tiny component to illustrate with React . Although, it's the same API . I thought this might be helpful. 

import React, { useState } from 'react';

import PropTypes from 'prop-types';
import { GoogleApiWrapper } from 'google-maps-react';

const SearchLocation = ({ google }) => {
  const [inputData, setInputData] = useState('');

  const handleChange = ({ target: { value } }) => {
    if (value) {
      setInputData(value);
      const autoCompleteService = new google.maps.places.AutocompleteService();
      autoCompleteService.getPlacePredictions(
        { input: value },
        (predictions, status) => {
           if (status === google.maps.places.PlacesServiceStatus.OK) {
              // update prediction, so that user can click on the predicted address
              const updatePredictions = (predictions) => {};
              // or get the coordinate of one prediction
              if (predictions.length > 0) {
                 geoCodeLocation(predictions[0]);
              }
           }
        }
      );
    }
  };

  const geoCodeLocation = (suggestion) => {
    const placeId = suggestion.place_id;
    const GeoCoder = new google.maps.Geocoder();
    GeoCoder.geocode({ placeId }, (response) => {
      const lattitude = response[0].geometry.location.lat();
      const longitude = response[0].geometry.location.lng();
      const coordinates = [longitude, lattitude];
      // save coordinate and suggestion
      const selectLocation = ({ coordinates, suggestion }) => {};
    });
  };

  return (
    <div>
        <input
          type="text"
          name="searchLocation"
          placeholder="Enter your address..."
          className="text-field"
          onChange={handleChange}
        />
      {/* handle suggestion */}
   </div>
  );
};

export default GoogleApiWrapper({
  apiKey: process.env.GOOGLE_API_KEY,
  v: '3'
})(SearchLocation);

SearchLocation.defaultProps = {};

SearchLocation.propTypes = {
  google: PropTypes.shape({}).isRequired,
};

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question how to get latitude, longitude onclick of a map in google maps api v3 javascript? Get Latitude and Longitude from result of google map v3 direction api? Wrapping latitude and longitude points with a 20m by 20m box (Google Maps API V3) How to get the Google Geocoder API geometry values (latitude and longitude) same as Google maps URL latitude and longitude values get longitude & latitude from google maps API by entering zipcode How get latitude and longitude of laptop (wifi) in Google Maps Geolocation API? Get latitude longitude from google maps itinerary How to get latitude longitude value from an address in Google Maps? Google Maps API - how to get latitude and longitude from Autocomplete without showing the map? How to get array of latitude and longitude array from google maps direction api
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM