{"id":2709,"date":"2017-08-21T19:12:09","date_gmt":"2017-08-21T19:12:09","guid":{"rendered":"https:\/\/www.codexworld.com\/?p=2709"},"modified":"2017-08-29T16:47:10","modified_gmt":"2017-08-29T16:47:10","slug":"google-map-move-marker-smoothly-javascript-api","status":"publish","type":"post","link":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/","title":{"rendered":"How to Move Marker Smoothly on Google Map using JavaScript"},"content":{"rendered":"<p>Google Maps API provides an easy way to <a href=\"https:\/\/www.codexworld.com\/adding-google-map-on-website-within-5-minutes\/\">display maps on the website<\/a>. You can point the location using a <a href=\"https:\/\/www.codexworld.com\/google-map-marker-info-window-using-javascript\/\">marker on Google Map and be show the text\/HTML on info window<\/a>. The map functionality can be extended in a various way and you can implement the Google Map on the web page as per your requirement.<\/p>\n<p>If you want to extend Google map functionality in a user-friendly way, the animated marker can be a useful feature. In this tutorial, we will show you how to <b>move marker smoothly on Google map<\/b> using Google Maps JavaScript API.<\/p>\n<p>This example script displays a map with a marker using Google Maps JavaScript API. On clicking on the Google Map, the marker moves smoothly and the marker position is changed.<\/p>\n<h2>Google Maps JavaScript API<\/h2>\n<p>Google Maps JavaScript API is used to create the map, so load this API first. You need to specify an API key in API URL for using the Google Maps JavaScript API.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span> <span style=\"color:#bf4f24\">src<\/span>=<span style=\"color:#0b6125\">\"https:\/\/maps.googleapis.com\/maps\/api\/js?key=YOUR_API_KEY\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<p>See this step-by-step instruction to get your own API key &#8211; <a href=\"https:\/\/www.codexworld.com\/get-google-maps-javascript-api-key\/\">How to Get Google Maps JavaScript API Key<\/a><\/p>\n<h2>JavaScript Code<\/h2>\n<p>The <code>initialize()<\/code> function creates a Google Map with a marker. The <code>transition()<\/code> and <code>moveMarker()<\/code> are used to move marker smoothly on click on the Google map.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">script<\/span>>\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> position <span style=\"color:#794938\">=<\/span> [<span style=\"color:#811f24;font-weight:700\">40.748774<\/span>, <span style=\"color:#794938\">-<\/span><span style=\"color:#811f24;font-weight:700\">73.985763<\/span>];\r\n\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">initialize<\/span>() { \r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> latlng <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.LatLng(position[<span style=\"color:#811f24;font-weight:700\">0<\/span>], position[<span style=\"color:#811f24;font-weight:700\">1<\/span>]);\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> myOptions <span style=\"color:#794938\">=<\/span> {\r\n        zoom: <span style=\"color:#811f24;font-weight:700\">16<\/span>,\r\n        center: latlng,\r\n        mapTypeId: google.maps.MapTypeId.ROADMAP\r\n    };\r\n    map <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.Map(<span style=\"color:#691c97\">document<\/span>.<span style=\"color:#693a17\">getElementById<\/span>(<span style=\"color:#0b6125\">\"mapCanvas\"<\/span>), myOptions);\r\n\r\n    marker <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.Marker({\r\n        position: latlng,\r\n        map: map,\r\n        title: <span style=\"color:#0b6125\">\"Latitude:\"<\/span><span style=\"color:#794938\">+<\/span>position[<span style=\"color:#811f24;font-weight:700\">0<\/span>]<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">\" | Longitude:\"<\/span><span style=\"color:#794938\">+<\/span>position[<span style=\"color:#811f24;font-weight:700\">1<\/span>]\r\n    });\r\n\r\n    google.maps.<span style=\"color:#691c97\">event<\/span>.addListener(map, <span style=\"color:#0b6125\">'click'<\/span>, <span style=\"color:#a71d5d;font-style:italic\">function<\/span>(<span style=\"color:#691c97\">event<\/span>) {\r\n        <span style=\"color:#a71d5d;font-style:italic\">var<\/span> result <span style=\"color:#794938\">=<\/span> [<span style=\"color:#691c97\">event<\/span>.latLng.lat(), <span style=\"color:#691c97\">event<\/span>.latLng.lng()];\r\n        transition(result);\r\n    });\r\n}\r\n\r\n<span style=\"color:#5a525f;font-style:italic\">\/\/Load google map<\/span>\r\ngoogle.maps.<span style=\"color:#691c97\">event<\/span>.addDomListener(<span style=\"color:#691c97\">window<\/span>, <span style=\"color:#0b6125\">'load'<\/span>, initialize);\r\n\r\n\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> numDeltas <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">100<\/span>;\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> delay <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">10<\/span>; <span style=\"color:#5a525f;font-style:italic\">\/\/milliseconds<\/span>\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> i <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">0<\/span>;\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> deltaLat;\r\n<span style=\"color:#a71d5d;font-style:italic\">var<\/span> deltaLng;\r\n\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">transition<\/span>(result){\r\n    i <span style=\"color:#794938\">=<\/span> <span style=\"color:#811f24;font-weight:700\">0<\/span>;\r\n    deltaLat <span style=\"color:#794938\">=<\/span> (result[<span style=\"color:#811f24;font-weight:700\">0<\/span>] <span style=\"color:#794938\">-<\/span> position[<span style=\"color:#811f24;font-weight:700\">0<\/span>])\/numDeltas;\r\n    deltaLng <span style=\"color:#794938\">=<\/span> (result[<span style=\"color:#811f24;font-weight:700\">1<\/span>] <span style=\"color:#794938\">-<\/span> position[<span style=\"color:#811f24;font-weight:700\">1<\/span>])\/numDeltas;\r\n    moveMarker();\r\n}\r\n\r\n<span style=\"color:#a71d5d;font-style:italic\">function<\/span> <span style=\"color:#bf4f24\">moveMarker<\/span>(){\r\n    position[<span style=\"color:#811f24;font-weight:700\">0<\/span>] <span style=\"color:#794938\">+<\/span><span style=\"color:#794938\">=<\/span> deltaLat;\r\n    position[<span style=\"color:#811f24;font-weight:700\">1<\/span>] <span style=\"color:#794938\">+<\/span><span style=\"color:#794938\">=<\/span> deltaLng;\r\n    <span style=\"color:#a71d5d;font-style:italic\">var<\/span> latlng <span style=\"color:#794938\">=<\/span> <span style=\"color:#794938\">new<\/span> <span style=\"color:#bf4f24\">google.maps<\/span>.LatLng(position[<span style=\"color:#811f24;font-weight:700\">0<\/span>], position[<span style=\"color:#811f24;font-weight:700\">1<\/span>]);\r\n    marker.setTitle(<span style=\"color:#0b6125\">\"Latitude:\"<\/span><span style=\"color:#794938\">+<\/span>position[<span style=\"color:#811f24;font-weight:700\">0<\/span>]<span style=\"color:#794938\">+<\/span><span style=\"color:#0b6125\">\" | Longitude:\"<\/span><span style=\"color:#794938\">+<\/span>position[<span style=\"color:#811f24;font-weight:700\">1<\/span>]);\r\n    marker.setPosition(latlng);\r\n    <span style=\"color:#794938\">if<\/span>(i<span style=\"color:#794938\">!<\/span><span style=\"color:#794938\">=<\/span>numDeltas){\r\n        i<span style=\"color:#794938\">++<\/span>;\r\n        <span style=\"color:#693a17\">setTimeout<\/span>(moveMarker, delay);\r\n    }\r\n}\r\n&lt;\/<span style=\"color:#bf4f24\">script<\/span>>\r\n<\/pre>\n<h2>HTML Code:<\/h2>\n<p>The following HTML defines an area to display the Google Map. The selector ID (<code>mapCanvas<\/code>) need to be specified in the <code>initialize()<\/code> function.<\/p>\n<pre>&lt;<span style=\"color:#bf4f24\">div<\/span> <span style=\"color:#bf4f24\">id<\/span><span style=\"color:#794938\">=<\/span><span style=\"color:#0b6125\">\"mapCanvas\"<\/span>>&lt;\/<span style=\"color:#bf4f24\">div<\/span>>\r\n<\/pre>\n<h2>CSS Code<\/h2>\n<p>The following CSS sets the height and width of the Google Map div.<\/p>\n<pre><span style=\"color:#bf4f24\">#mapCanvas<\/span>{\r\n    <span style=\"color:#691c97\">width<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">100<span style=\"color:#794938\">%<\/span><\/span>;\r\n    <span style=\"color:#691c97\">height<\/span><span style=\"color:#794938\">:<\/span> <span style=\"color:#811f24;font-weight:700\">400<span style=\"color:#794938\">px<\/span><\/span>;\r\n}\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Google Maps API provides an easy way to display maps on the website. You can point the location using a marker on Google Map and be show the text\/HTML on info window. The map functionality <\/p>\n","protected":false},"author":1,"featured_media":2710,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[109],"tags":[35,66],"class_list":["post-2709","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-googlemap","tag-google-maps-api","tag-javascript","cat-109-id","has_thumb"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>How to Move Marker Smoothly on Google Map using JavaScript - CodexWorld<\/title>\n<meta name=\"description\" content=\"Google map animated marker smoothly - Example code to move marker smoothly on Google map and set marker position on click using Google Maps JavaScript API.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Move Marker Smoothly on Google Map using JavaScript - CodexWorld\" \/>\n<meta property=\"og:description\" content=\"Google map animated marker smoothly - Example code to move marker smoothly on Google map and set marker position on click using Google Maps JavaScript API.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/\" \/>\n<meta property=\"og:site_name\" content=\"CodexWorld\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/codexworld\" \/>\n<meta property=\"article:published_time\" content=\"2017-08-21T19:12:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-08-29T16:47:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/google-map-move-marker-smoothly-javascript-api-codexworld.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1366\" \/>\n\t<meta property=\"og:image:height\" content=\"768\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"CodexWorld\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@codexworldblog\" \/>\n<meta name=\"twitter:site\" content=\"@codexworldweb\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"CodexWorld\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/\"},\"author\":{\"name\":\"CodexWorld\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\"},\"headline\":\"How to Move Marker Smoothly on Google Map using JavaScript\",\"datePublished\":\"2017-08-21T19:12:09+00:00\",\"dateModified\":\"2017-08-29T16:47:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/\"},\"wordCount\":256,\"commentCount\":7,\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/google-map-move-marker-smoothly-javascript-api-codexworld.png\",\"keywords\":[\"Google Maps API\",\"JavaScript\"],\"articleSection\":[\"GoogleMap\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/\",\"name\":\"How to Move Marker Smoothly on Google Map using JavaScript - CodexWorld\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/google-map-move-marker-smoothly-javascript-api-codexworld.png\",\"datePublished\":\"2017-08-21T19:12:09+00:00\",\"dateModified\":\"2017-08-29T16:47:10+00:00\",\"description\":\"Google map animated marker smoothly - Example code to move marker smoothly on Google map and set marker position on click using Google Maps JavaScript API.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/google-map-move-marker-smoothly-javascript-api-codexworld.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2017\\\/08\\\/google-map-move-marker-smoothly-javascript-api-codexworld.png\",\"width\":1366,\"height\":768,\"caption\":\"google-map-move-marker-smoothly-javascript-api-codexworld\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/google-map-move-marker-smoothly-javascript-api\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.codexworld.com\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to Move Marker Smoothly on Google Map using JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#website\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"name\":\"CodexWorld\",\"description\":\"Web &amp; Mobile App Development Company\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.codexworld.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#organization\",\"name\":\"CodexWorld\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.codexworld.com\\\/wp-content\\\/uploads\\\/2014\\\/09\\\/codexworld-logo.png\",\"width\":200,\"height\":19,\"caption\":\"CodexWorld\"},\"image\":{\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldweb\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/codexworld\",\"https:\\\/\\\/www.youtube.com\\\/codexworld\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.codexworld.com\\\/#\\\/schema\\\/person\\\/9da51d8fa3cdefeb5ec9c69136d4baf0\",\"name\":\"CodexWorld\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g\",\"caption\":\"CodexWorld\"},\"description\":\"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.\",\"sameAs\":[\"http:\\\/\\\/www.codexworld.com\",\"https:\\\/\\\/www.facebook.com\\\/codexworld\",\"https:\\\/\\\/x.com\\\/codexworldblog\"],\"url\":\"https:\\\/\\\/www.codexworld.com\\\/author\\\/nitya192265\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to Move Marker Smoothly on Google Map using JavaScript - CodexWorld","description":"Google map animated marker smoothly - Example code to move marker smoothly on Google map and set marker position on click using Google Maps JavaScript API.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/","og_locale":"en_US","og_type":"article","og_title":"How to Move Marker Smoothly on Google Map using JavaScript - CodexWorld","og_description":"Google map animated marker smoothly - Example code to move marker smoothly on Google map and set marker position on click using Google Maps JavaScript API.","og_url":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/","og_site_name":"CodexWorld","article_publisher":"https:\/\/www.facebook.com\/codexworld","article_author":"https:\/\/www.facebook.com\/codexworld","article_published_time":"2017-08-21T19:12:09+00:00","article_modified_time":"2017-08-29T16:47:10+00:00","og_image":[{"width":1366,"height":768,"url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/google-map-move-marker-smoothly-javascript-api-codexworld.png","type":"image\/png"}],"author":"CodexWorld","twitter_card":"summary_large_image","twitter_creator":"@codexworldblog","twitter_site":"@codexworldweb","twitter_misc":{"Written by":"CodexWorld","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#article","isPartOf":{"@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/"},"author":{"name":"CodexWorld","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0"},"headline":"How to Move Marker Smoothly on Google Map using JavaScript","datePublished":"2017-08-21T19:12:09+00:00","dateModified":"2017-08-29T16:47:10+00:00","mainEntityOfPage":{"@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/"},"wordCount":256,"commentCount":7,"publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"image":{"@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/google-map-move-marker-smoothly-javascript-api-codexworld.png","keywords":["Google Maps API","JavaScript"],"articleSection":["GoogleMap"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/","url":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/","name":"How to Move Marker Smoothly on Google Map using JavaScript - CodexWorld","isPartOf":{"@id":"https:\/\/www.codexworld.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#primaryimage"},"image":{"@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#primaryimage"},"thumbnailUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/google-map-move-marker-smoothly-javascript-api-codexworld.png","datePublished":"2017-08-21T19:12:09+00:00","dateModified":"2017-08-29T16:47:10+00:00","description":"Google map animated marker smoothly - Example code to move marker smoothly on Google map and set marker position on click using Google Maps JavaScript API.","breadcrumb":{"@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#primaryimage","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/google-map-move-marker-smoothly-javascript-api-codexworld.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/google-map-move-marker-smoothly-javascript-api-codexworld.png","width":1366,"height":768,"caption":"google-map-move-marker-smoothly-javascript-api-codexworld"},{"@type":"BreadcrumbList","@id":"https:\/\/www.codexworld.com\/google-map-move-marker-smoothly-javascript-api\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.codexworld.com\/"},{"@type":"ListItem","position":2,"name":"How to Move Marker Smoothly on Google Map using JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.codexworld.com\/#website","url":"https:\/\/www.codexworld.com\/","name":"CodexWorld","description":"Web &amp; Mobile App Development Company","publisher":{"@id":"https:\/\/www.codexworld.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.codexworld.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.codexworld.com\/#organization","name":"CodexWorld","url":"https:\/\/www.codexworld.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","contentUrl":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2014\/09\/codexworld-logo.png","width":200,"height":19,"caption":"CodexWorld"},"image":{"@id":"https:\/\/www.codexworld.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldweb","https:\/\/www.linkedin.com\/company\/codexworld","https:\/\/www.youtube.com\/codexworld"]},{"@type":"Person","@id":"https:\/\/www.codexworld.com\/#\/schema\/person\/9da51d8fa3cdefeb5ec9c69136d4baf0","name":"CodexWorld","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/cf4999db3b409de559f80677afa01729bb2eeda19be273c254e8b2c22729e386?s=96&r=g","caption":"CodexWorld"},"description":"CodexWorld is a programming blog, one-stop destination for web professionals \u2014 developers, programmers, freelancers, and site owners.","sameAs":["http:\/\/www.codexworld.com","https:\/\/www.facebook.com\/codexworld","https:\/\/x.com\/codexworldblog"],"url":"https:\/\/www.codexworld.com\/author\/nitya192265\/"}]}},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.codexworld.com\/wp-content\/uploads\/2017\/08\/google-map-move-marker-smoothly-javascript-api-codexworld.png","jetpack_shortlink":"https:\/\/wp.me\/p6bxIh-HH","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2709","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/comments?post=2709"}],"version-history":[{"count":5,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2709\/revisions"}],"predecessor-version":[{"id":2732,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/posts\/2709\/revisions\/2732"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media\/2710"}],"wp:attachment":[{"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/media?parent=2709"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/categories?post=2709"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codexworld.com\/wp-json\/wp\/v2\/tags?post=2709"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}