How to move a marker in Google Maps API

Question

I m using the Google Maps API V3 and I m trying to make a marker move across the screen  Here s what I have    lt  DOCTYPE html gt   lt html gt   lt head gt   lt meta name  viewport  content  initial-scale 1 0  user-scalable no    gt   lt style type  text css  gt    html   height  100      body   height  100   margin  0  padding  0      map canvas   height  100     lt  style gt   lt script type  text javascript      src  http   maps googleapis com maps api js sensor false  gt   lt  script gt   lt script type  text javascript  gt  function initialize       var myLatLng   new google maps LatLng 50 50     var myOptions         zoom  4      center  myLatLng      mapTypeId  google maps MapTypeId ROADMAP       var map   new google maps Map document getElementById  map canvas    myOptions      image    bus gif     marker   new google maps Marker  position  myLatLng  map  map  icon  image       marker setMap map      function moveBus          Move Bus     lt  script gt   lt  head gt    lt body onload  initialize    gt   lt script type  text javascript  gt  moveBus     lt  script gt   lt div id  map canvas  style  height  500px  width  500px   gt  lt  div gt    lt  body gt   lt  html gt    Now what I ve tried is replacing    Move Bus with  marker setPosition new google maps LatLng 0 0      But that didn t do anything  That s the command I saw on the API reference  I m also relatively new to Javascript  so it might be a JS error on my part

User · Answer

use panTo x y  This will help u

User · Answer

lt style gt       frame          position  fixed          top  5           background-color   fff          border-radius  5px          box-shadow  0 0 6px  B2B2B2          display  inline-block          padding  8px 8px          width  98           height  92           display  none          z-index  1000             map          position  fixed          display  inline-block          width  99           height  93           display  none          z-index  1000              loading          position  fixed          top  50           left  50           opacity  1 important          margin-top  -100px          margin-left  -150px          background-color   fff          border-radius  5px          box-shadow  0 0 6px  B2B2B2          display  inline-block          padding  8px 8px          max-width  66           display  none          color   000              mytitle          color   FFF          background-image  linear-gradient to bottom  d67631  d67631               border-color  rgba 47  164  35  1           width  100           cursor  move             closex           display  block          float right          position relative          top -10px          right  -10px          height  20px          cursor  pointer             pointer          cursor  pointer  important          lt  style gt    lt div id  loading  gt       lt i class  fa fa-circle-o-notch fa-spin fa-2x  gt  lt  i gt      Loading     lt  div gt   lt div id  frame  gt       lt div id  headerx  gt  lt  div gt       lt div id  map   gt           lt  div gt   lt  div gt     lt  php  url   Yii  app  - gt baseUrl     reports reports transponderdetails     gt   lt script src  https   maps googleapis com maps api js v 3 exp  gt  lt  script gt    lt script gt      function clode                 frame   hide                frame   html              function track id                loading   show                loading   parent   css  opacity    0 7                ajax               type   POST               url    lt  php echo  url    gt                data    id   id               success  function data                        frame   show                        headerx   html data                       loading   parents   css  opacity    1                        loading   hide                    var thelat   parseFloat     lat   text                     var long   parseFloat     long   text                         map   show                    var lat   thelat                  var lng   long                  var orlat thelat                  var orlong long                    Intialize the Path Array                 var path   new google maps MVCArray                    var service   new google maps DirectionsService                      var myLatLng   new google maps LatLng lat  lng   myOptions    zoom  4  center  myLatLng  mapTypeId  google maps MapTypeId ROADMAP                   var map   new google maps Map document getElementById  map    myOptions                   var poly   new google maps Polyline  map  map  strokeColor    4986E7                     var marker   new google maps Marker  position  myLatLng  map  map                     function initialize                         marker setMap map                       movepointer map  marker                       var drawingManager   new google maps drawing DrawingManager                        drawingManager setMap map                                      function movepointer map  marker                        marker setPosition new google maps LatLng lat  lng                        map panTo new google maps LatLng lat  lng                         var src   myLatLng   start point                     var des   myLatLng    should be the destination                     path push src                       poly setPath path                       service route                           origin  src                          destination  des                          travelMode  google maps DirectionsTravelMode DRIVING                        function result  status                            if  status    google maps DirectionsStatus OK                                for  var i   0  len   result routes 0  overview path length  i  lt  len  i                                      path push result routes 0  overview path i                                                                                                                                             function                   setInterval function                         lat   Math random     orlat                      lng   Math random     orlong                      console log lat    -    lng                       myLatLng   new google maps LatLng lat  lng                       movepointer map  marker                       1000                                 error  function                         frame   html  Sorry  no details found                                       return false              function                 frame   draggable              lt  script gt

User · Answer

Just try to create the marker and set the draggable property to true  The code will be something as follows   Marker   new google maps Marker       position  latlon      map  map                  draggable  true      title   Drag me         I hope this helps

User · Answer

You are using the correct API  but is the  marker  variable visible to the entire script  I don t see this marker variable declared globally

User · Answer

Here is the full code with no errors           lt  DOCTYPE html gt           lt html gt           lt head gt           lt meta name  viewport  content  initial-scale 1 0  user-scalable no    gt           lt style type  text css  gt            html   height  100              body   height  100   margin  0  padding  0              map canvas   height  100                map-canvas                     height  400px           width  500px                     lt  style gt       lt  script gt           lt script type  text javascript  gt          function initialize                  var myLatLng   new google maps LatLng  17 3850  78 4867                    myOptions                         zoom  5                      center  myLatLng                      mapTypeId  google maps MapTypeId ROADMAP                                        map   new google maps Map  document getElementById   map-canvas     myOptions                    marker   new google maps Marker   icon                        url   https   developers google com maps documentation javascript examples full images beachflag png                          This marker is 20 pixels wide by 32 pixels high                      size  new google maps Size 20  32                          The origin for this image is  0  0                       origin  new google maps Point 0  0                          The anchor for this image is the base of the flagpole at  0  32                       anchor  new google maps Point 0  32                     position  myLatLng  map  map                  marker setMap  map                moveBus  map  marker                          function moveBus  map  marker                 setTimeout      gt                    marker setPosition  new google maps LatLng  12 3850  77 4867                      map panTo  new google maps LatLng  17 3850  78 4867                     1000                           lt  script gt           lt  head gt            lt body onload  initialize    gt           lt script type  text javascript  gt            moveBus             lt  script gt            lt script src  http   maps googleapis com maps api js sensor AIzaSyB-W sLy7VzaQNdckkY4V5r980wDR9ldP4  gt  lt  script gt           lt div id  map-canvas  style  height  500px  width  500px   gt  lt  div gt              lt  body gt           lt  html gt

User · Answer

moveBus   is getting called before initialize    Try putting that line at the end of your initialize   function  Also Lat Lon 0 0 is off the map  it s coordinates  not pixels   so you can t see it when it moves  Try 54 54  If you want the center of the map to  move to the new location  use panTo     Demo  http   jsfiddle net ThinkingStiff Rsp22   HTML    lt script src  http   maps googleapis com maps api js sensor false  gt  lt  script gt   lt div id  map-canvas  gt  lt  div gt    CSS    map-canvas     height  400px   width  500px      Script   function initialize          var myLatLng   new google maps LatLng  50  50            myOptions                 zoom  4              center  myLatLng              mapTypeId  google maps MapTypeId ROADMAP                        map   new google maps Map  document getElementById   map-canvas     myOptions            marker   new google maps Marker   position  myLatLng  map  map          marker setMap  map        moveBus  map  marker        function moveBus  map  marker          marker setPosition  new google maps LatLng  0  0          map panTo  new google maps LatLng  0  0           initialize

[javascript] How to move a marker in Google Maps API

Examples related to javascript

Examples related to google-maps-api-3

Examples related to move

Examples related to google-maps-markers