Asked  7 Months ago    Answers:  5   Viewed   37 times

So I have latitude and longitude Like 44.4647452 and 7.3553838. I need to get address like: Milan, Italy, str. Kennedy 89.

How I can do it?

 Answers

66

Simply pass latitude, longitude and your Google API Key to the following query string, you will get a json array, fetch your city from there.

https://maps.googleapis.com/maps/api/geocode/json?latlng=44.4647452,7.3553838&key=YOUR_API_KEY

Note: Ensure that no space exists between the latitude and longitude values when passed in the latlng parameter.

Click here to get an API key

Wednesday, March 31, 2021
 
RemiX
answered 7 Months ago
72

From a Geocoder object, you can call the getFromLocation(double, double, int) method. It will return a list of Address objects that have a method getLocality().

Geocoder gcd = new Geocoder(context, Locale.getDefault());
List<Address> addresses = gcd.getFromLocation(lat, lng, 1);
if (addresses.size() > 0) {
    System.out.println(addresses.get(0).getLocality());
}
else {
   // do your stuff
}
Wednesday, June 2, 2021
 
talkhabi
answered 5 Months ago
88

As of version 3.17, the google.maps.Marker objects exists in the markerLayer pane which is just a fancy name for a div.

To get a reference to the markerLayer you need to create an OverlayView Object. Now, this object is a bit abstract. You need to implement a draw function for it to work. For example, open the basic example in a new tab and paste this to the console

var overlay = new google.maps.OverlayView();
overlay.draw=function() {};

overlay.setMap(map);

overlay.getPanes();

it returns:

{
    floatPane: div
    floatShadow: div
    mapPane: div
    markerLayer: div
    overlayImage: div
    overlayLayer: div
    overlayMouseTarget: div
    overlayShadow: div
}

Thay markerLayer is a div which contains the markers. If I create your marker using a given icon image,

var marker = new google.maps.Marker({
                position: map.getCenter(),
                map: map,                          
                icon: 'http://ruralshores.com/assets/marker-icon.png',
                optimized:false
             });

My markerLayer will be:

enter image description here

Where the selected div (the one with z-index 103) is the markerLayer.

If you wanted to access the markerLayer programatically, you could add a "markerLayer" class to it after getting its reference with the getPanes method. I guess that every image inside the markerLayer is a marker, so you could style it at will.

TL/DR : you can style it, provided you went through all the trouble of finding the DOM reference to your marker.

Edit: I made a bl.ocks for you to check

Friday, June 25, 2021
 
Jauco
answered 4 Months ago
36
  1. set the provideRouteAlternatives option to the DirectionsRequest to true

provideRouteAlternatives
Type: boolean Whether or not route alternatives should be provided. Optional.

  1. add a second loop to process any additional routes returned

    service.route({
        origin: src,
        destination: des,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    }, function (result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            for (var j = 0; j < result.routes.length; j++) {
                var path = new google.maps.MVCArray();
                polyArray.push(new google.maps.Polyline({
                   map: map,
                   strokeColor: colors[j],
                   strokeOpacity: 1.0,
                   strokeWeight: 5
                }));
                polyArray[polyArray.length - 1].setPath(path);
                for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) {
                    path.push(result.routes[j].overview_path[i]);
                }
            }
        }
    });
    

proof of concept fiddle

code snippet:

$(document).ready(function() {

  var markers = [

    {
      "title": '',
      "lat": '56.965969',
      "lng": '24.143496',
      "description": ''
    }, {
      "title": '',
      "lat": '56.966259',
      "lng": '24.385860',
      "description": ''
    }
  ];
  var mapOptions = {
    zoom: 11,
    center: new google.maps.LatLng(56.975749, 24.279310),
    scrollwheel: false,
    navigationControl: false,
    mapTypeControl: false,
    scaleControl: false,
    draggable: false
  };
  var service = new google.maps.DirectionsService();
  var polyArray = [];
  var infoWindow = new google.maps.InfoWindow();
  var map = new google.maps.Map(document.getElementById("map_1"), mapOptions);


  var lat_lng = new Array();
  var colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
  var image = 'http://maps.google.com/mapfiles/ms/micons/blue.png';
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(56.966259, 24.385860),
    map: map,
    title: 'Sillava',
    icon: image
  });
  for (i = 0; i < markers.length; i++) {
    var data = markers[i];
    var myLatlng = new google.maps.LatLng(data.lat, data.lng);
    lat_lng.push(myLatlng);

  }

  for (var i = 0; i < lat_lng.length; i++) {
    if ((i + 1) < lat_lng.length) {
      var src = lat_lng[i];
      var des = lat_lng[i + 1];
      // path.push(src);
      // poly.setPath(path);
      service.route({
        origin: src,
        destination: des,
        provideRouteAlternatives: true,
        travelMode: google.maps.DirectionsTravelMode.DRIVING
      }, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          for (var j = 0; j < result.routes.length; j++) {
            var path = new google.maps.MVCArray();
            polyArray.push(new google.maps.Polyline({
              map: map,
              strokeColor: colors[j],
              strokeOpacity: 1.0,
              strokeWeight: 5
            }));
            polyArray[polyArray.length - 1].setPath(path);
            for (var i = 0, len = result.routes[j].overview_path.length; i < len; i++) {
              path.push(result.routes[j].overview_path[i]);
            }
          }
        }
      });
    }
  }

});
.map {
  width: 100%;
  height: 100%;
}
body,
html {
  width: 100%;
  height: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_1" class="map"></div>
Saturday, July 31, 2021
 
Jeffrey Stilwell
answered 3 Months ago
48

Ok, so firstly you need reverse geocoding, not regular geocoding, because you are going from a latitude/longitude into an address rather than the other way around (see reference). Secondly your key listener would never do anything because it almost immediately states return false; in this case you probably want event.stopPropogation(). Furthermore google maps will intercept your mouse clicks at a greater depth in the DOM tree than document, so the event will never be listened that highly anyway.

So what I did was to change your geocode into a reverse geocode, as well as move the code in the document listener into the google listener. If you wanted to retain the behaviour of the listener being added on focus, you can simply create a new listener on the map object. Here is a working jsfiddle demonstrating these changes, hopefully this helps.

Tuesday, October 12, 2021
 
Shafeeq Mohammed
answered 2 Weeks ago
Only authorized users can answer the question. Please sign in first, or register a free account.
Not the answer you're looking for? Browse other questions tagged :
 
Share