lundi 18 avril 2016

How can I get correct coordinates from a google maps url?

Situation:

I'm using the Google Maps Javascript API (experimental Version, 3.exp) on a website to draw a Google map using a Google Maps url. The map shows a marker that is centered for a particular location. The user has the option to change the url to another google maps url, which will draw a different map for that location.

More specifically, a user should be able to search a place in Google Maps, copy the generated url, paste it into a text field on a different site, save changes, then see a map centered, with a marker for the searched location.

Screenshot of google map with incorrectly placed marker (using coordinates from a google maps url)

Problem

The problem is that the marker keeps on displays west (to the left) of the actual place, when searched on Google Maps.

Environment

Currently, our user base is mainly Korean, so users will mainly be searching Korean places and using urls with Korean text. This is for javascript.

The place used in this example is 묵현초등학교, searched with Google Maps.


Code

var url = 'http://ift.tt/1XEthfM';
maps = url.split("/");

if(typeof maps[5] == "undefined" || typeof maps[6] == "undefined") {
    console.log('incorrect google map URL');
    return false;
}

var pos = maps[6].replace("@", "").split(","),
  zoom = Number(pos[2].replace("z", "")),
  Latlng = new google.maps.LatLng(pos[0], pos[1]),
  map = new google.maps.Map(document.getElementById(element), {
    center: Latlng,
    zoom: zoom,
    scrollwheel: true,
    navigationControl: true,
    mapTypeControl: false,
    scaleControl: false,
  });

var marker = new google.maps.Marker({
  position: Latlng,
  map: map,
});
<div id="element">Google Map should be here</div>

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?v=3.exp"></script>

Notes

I've tried using different approaches, but I get the error message from my error catching code (incorrect google maps url).

  1. geocode the address from a google maps URL
    • somestimes I got no results
    • other times the marker was off, because the location was approximate
var mapData;
var maps = url.split("/");
var info = decodeURIComponent(maps[5]),
  address = info.replace(" ", "+");
$.getJSON('//maps.googleapis.com/maps/api/geocode/json?address=' + address, function(data) {
  mapData = data;
});


var mapLocation = mapData['results'][0]['geometry']['location'];
var Latlng = new google.maps.LatLng(mapLocation.lat, mapLocation.lng);
  1. use older url styles

    • http://ift.tt/1WAPXiM
    • http://ift.tt/1XEthfO
  2. try new approaches to the current URL structure

    • http://ift.tt/1WAPXiO
  3. remove the '!3m1!4b1' from the end of the url (hashbang modifier)

  4. manually adjust the coordinate values in a google map URL
    • different places need to be adjusted differently, even though the marker continually displays to the left of the actual location

This is my first question on stack overflow. Hope there's enough information to work with. This task needs to be resolved quite urgently. Thank you for your help.




Aucun commentaire:

Enregistrer un commentaire