Getting Lat Lng from Google marker

Question

I made a Google Maps map with a draggable marker  When the user drags the marker  I need to know the new latitude and longitude  but I don t understand what is the best approach to doing that   How can I retrieve the new coordinates

User · Answer

You could just call getPosition   on the Marker - have you tried that   If you re on the deprecated  v2 of the JavaScript API  you can call getLatLng   on GMarker

User · Answer

show the marker position     console log  objMarker position lat      console log  objMarker position lng          create a new point based into marker position     var deltaLat   1 002  var deltaLng   -1 003   var objPoint   new google maps LatLng     parseFloat  objMarker position lat       deltaLat     parseFloat  objMarker position lng       deltaLng        now center the map using the new point     objMap setCenter  objPoint

User · Answer

There are a lot of answers to this question  which never worked for me  including suggesting getPosition   which doesn t seem to be a method available for markers objects   The only method that worked for me in maps V3 is  simply     var lat   marker lat    var long   marker lng

User · Answer

x000D   x000D  var map   new google maps Map document getElementById  map canvas      x000D    zoom  10  x000D    center  new google maps LatLng 13 103  80 274   x000D    mapTypeId  google maps MapTypeId ROADMAP x000D      x000D   x000D  var myMarker   new google maps Marker   x000D    position  new google maps LatLng 18 103  80 274   x000D    draggable  true x000D      x000D   x000D  google maps event addListener myMarker   dragend   function evt    x000D    document getElementById  current   innerHTML     lt p gt Marker dropped  Current Lat      evt latLng lat   toFixed 3      Current Lng      evt latLng lng   toFixed 3      lt  p gt    x000D      x000D  google maps event addListener myMarker   dragstart   function evt    x000D    document getElementById  current   innerHTML     lt p gt Currently dragging marker    lt  p gt    x000D      x000D  map setCenter myMarker position   x000D  myMarker setMap map   x000D   x000D  function getLocation     x000D    if  navigator geolocation    x000D      navigator geolocation getCurrentPosition showPosition   x000D      else   x000D      x innerHTML    Geolocation is not supported by this browser    x000D      x000D    x000D   x000D  function showPosition position    x000D    document getElementById  current   innerHTML     lt p gt Marker dropped  Current Lat      position coords latitude     Current Lng      position coords longitude     lt  p gt    x000D    var myMarker   new google maps Marker   x000D      position  new google maps LatLng position coords latitude  position coords longitude   x000D      draggable  true x000D        x000D    google maps event addListener myMarker   dragend   function evt    x000D      document getElementById  current   innerHTML     lt p gt Marker dropped  Current Lat      evt latLng lat   toFixed 3      Current Lng      evt latLng lng   toFixed 3      lt  p gt    x000D        x000D    google maps event addListener myMarker   dragstart   function evt    x000D      document getElementById  current   innerHTML     lt p gt Currently dragging marker    lt  p gt    x000D        x000D    map setCenter myMarker position   x000D    myMarker setMap map   x000D    x000D  getLocation    x000D   map canvas   x000D    width  980px  x000D    height  500px  x000D    x000D   x000D   current   x000D    padding-top  25px  x000D    x000D   lt script src  http   maps google com maps api js sensor false amp  js  gt  lt  script gt  x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   x000D   lt head gt  x000D   x000D   lt  head gt  x000D   x000D   lt body gt  x000D     lt section gt  x000D       lt div id  map canvas  gt  lt  div gt  x000D       lt div id  current  gt  x000D         lt p gt Marker dropped  Current Lat 18 103 Current Lng 80 274 lt  p gt  x000D       lt  div gt  x000D     lt  section gt  x000D   x000D   x000D   lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Here is the JSFiddle Demo   In Google Maps API V3 it s pretty simple to track the lat and lng of a draggable marker   Let s start with the following HTML and CSS as our base    lt div id  map canvas  gt  lt  div gt   lt div id  current  gt Nothing yet    lt  div gt    map canvas      width  400px      height  300px      current       padding-top  25px      Here is our initial JavaScript initializing the google map   We create a marker that we want to drag and set it s draggable property to true   Of course keep in mind it should be attached to an onload event of your window for it to be loaded  but i ll skip to the code   var map   new google maps Map document getElementById  map canvas          zoom  1      center  new google maps LatLng 35 137879  -82 836914       mapTypeId  google maps MapTypeId ROADMAP      var myMarker   new google maps Marker       position  new google maps LatLng 47 651968  9 478485       draggable  true       Here we attach two events dragstart to track the start of dragging and dragend to drack when the marker stop getting dragged  and the way we attach it is to use google maps event addListener   What we are doing here is setting the div current s content when marker is getting dragged and then set the marker s lat and lng when drag stops   Google mouse event has a property name  latlng  that returns  google maps LatLng  object when the event triggers   So  what we are doing here is basically using the identifier for this listener that gets returned by the google maps event addListener and get the property latLng to extract the dragend s current position   Once we get that Lat Lng when the drag stops we ll display within your current div   google maps event addListener myMarker   dragend   function evt       document getElementById  current   innerHTML     lt p gt Marker dropped  Current Lat      evt latLng lat   toFixed 3      Current Lng      evt latLng lng   toFixed 3      lt  p gt         google maps event addListener myMarker   dragstart   function evt       document getElementById  current   innerHTML     lt p gt Currently dragging marker    lt  p gt          Lastly  we ll center our marker and display it on the map   map setCenter myMarker position   myMarker setMap map     Let me know if you have any questions regarding my answer

User · Answer

var lat   marker getPosition   lat    var lng   marker getPosition   lng      More information can be found at Google Maps API - LatLng

User · Answer

You should add a listener on the marker and listen for the drag or dragend event  and ask the event its position when you receive this event    See http   code google com intl fr apis maps documentation javascript reference html Marker for the description of events triggered by the marker  And see http   code google com intl fr apis maps documentation javascript reference html MapsEventListener for methods allowing to add event listeners

User · Answer

try this  var latlng   new google maps LatLng 51 4975941  -0 0803232   var map   new google maps Map document getElementById  map          center  latlng      zoom  11      mapTypeId  google maps MapTypeId ROADMAP     var marker   new google maps Marker       position  latlng      map  map      title   Set lat lon values for this property       draggable  true      google maps event addListener marker   dragend   function  event        document getElementById  latbox   value   this getPosition   lat        document getElementById  lngbox   value   this getPosition   lng

[javascript] Getting Lat/Lng from Google marker

Examples related to javascript

Examples related to google-maps

Examples related to google-maps-markers