{"id":1012,"date":"2019-01-21T17:03:30","date_gmt":"2019-01-21T11:33:30","guid":{"rendered":"http:\/\/blog.openwebsolutions.in\/?p=1012"},"modified":"2019-01-22T11:58:41","modified_gmt":"2019-01-22T06:28:41","slug":"how-to-create-curved-line-in-google-map","status":"publish","type":"post","link":"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/","title":{"rendered":"How to create a curved line in Google map?"},"content":{"rendered":"

Google Maps is nothing but a web-based service which provides data regarding geographical regions globally. In addition to conventional road maps, it offers terrain, satellite and road views of many places. It also offers street views comprising photographs taken by any person.<\/p>\n

This API is very useful for developers as they can customize maps with their own content and image for displaying on web pages and mobile devices. It also has four basic map types (roadmap, satellite, hybrid, and terrain) which they can modify using layers and styles, controls and events, and various services and libraries.<\/p>\n

There are different types of shapes in google map:<\/p>\n

    \n
  1. Lines<\/li>\n
  2. Polygons<\/li>\n
  3. Circles<\/li>\n
  4. Rectangles<\/li>\n<\/ol>\n

    In this example, we are using Polyline(It is a linear overlay of connected line segments on the map, it also consists array of Latitude Longitude locations, which creates a series of line segments that connect those locations in an ordered sequence) to create a curved line.<\/p>\n

    Here is sample code for implementing curved line in google map:<\/p>\n

    HTML:<\/pre>\n
    <div id=”curved-map”>\/div><\/p>\n
    CSS:<\/strong>\r\n  html, body, #curved-map {\r\n    height: 100%;\r\n    width: 100%;\r\n    margin: 0;\r\n    padding: 0;\r\n}\r\n<\/pre>\n
    JAVASCRIPT:<\/strong>\r\nvar map;\r\n\r\nvar curvature = 0.5; \/\/ how curvy to make the arc\r\n\r\nfunction init() {\r\n    var Map = google.maps.Map,\r\n        LatLng = google.maps.LatLng,\r\n        LatLngBounds = google.maps.LatLngBounds,\r\n        Marker = google.maps.Marker,\r\n        Point = google.maps.Point;\r\n\r\n    \/\/ This is the initial location of the points\r\n    \/\/ (you can drag the markers around after the map loads)\r\n    var pos1 = new LatLng(23.634501, -102.552783);\r\n    var pos2 = new LatLng(17.987557, -92.929147);\r\n\r\n    var bounds = new LatLngBounds();\r\n    bounds.extend(pos1);\r\n    bounds.extend(pos2);\r\n\r\n    map = new Map(document.getElementById('curved-map'), {\r\n        center: bounds.getCenter(),\r\n        zoom: 12\r\n    });\r\n    map.fitBounds(bounds);\r\n\r\n    var markerP1 = new Marker({\r\n        position: pos1,\r\n        label: \"1\",\r\n        draggable: true,\r\n        map: map\r\n    });\r\n    var markerP2 = new Marker({\r\n        position: pos2,\r\n        label: \"2\",\r\n        draggable: true,\r\n        map: map\r\n    });\r\n\r\n    var curveMarker;\r\n\r\n    function updateCurveMarker() {\r\n        var pos1 = markerP1.getPosition(), \/\/ latlng\r\n            pos2 = markerP2.getPosition(),\r\n            projection = map.getProjection(),\r\n            p1 = projection.fromLatLngToPoint(pos1), \/\/ xy\r\n            p2 = projection.fromLatLngToPoint(pos2);\r\n        \/\/ Calculate the arc.\r\n        \/\/ To simplify the math, these points \r\n        \/\/ are all relative to p1:\r\n        var e = new Point(p2.x - p1.x, p2.y - p1.y), \/\/ endpoint (p2 relative to p1)\r\n            m = new Point(e.x \/ 2, e.y \/ 2), \/\/ midpoint\r\n            o = new Point(e.y, -e.x), \/\/ orthogonal\r\n            c = new Point( \/\/ curve control point\r\n                m.x + curvature * o.x,\r\n                m.y + curvature * o.y);\r\n\r\n        var pathDef = 'M 0,0 ' +\r\n            'q ' + c.x + ',' + c.y + ' ' + e.x + ',' + e.y;\r\n\r\n        var zoom = map.getZoom(),\r\n            scale = 1 \/ (Math.pow(2, -zoom));\r\n\r\n        var symbol = {\r\n            path: pathDef,\r\n            scale: scale,\r\n            strokeWeight: 2,\r\n            fillColor: 'none'\r\n        };\r\n\r\n        if (!curveMarker) {\r\n            curveMarker = new Marker({\r\n                position: pos1,\r\n                clickable: false,\r\n                icon: symbol,\r\n                zIndex: 0, \/\/ behind the other markers\r\n                map: map\r\n            });\r\n        } else {\r\n            curveMarker.setOptions({\r\n                position: pos1,\r\n                icon: symbol,\r\n            });\r\n        }\r\n    }\r\n\r\n    google.maps.event.addListener(map, 'projection_changed', updateCurveMarker);\r\n    google.maps.event.addListener(map, 'zoom_changed', updateCurveMarker);\r\n\r\n    google.maps.event.addListener(markerP1, 'position_changed', updateCurveMarker);\r\n    google.maps.event.addListener(markerP2, 'position_changed', updateCurveMarker);\r\n}\r\ngoogle.maps.event.addDomListener(window, 'load', init);\r\n<\/pre>\n
    LIBRARY:<\/strong>\r\nhttps:\/\/maps.googleapis.com\/maps\/api\/js?sensor=false&libraries=geometry,places&ext=.js\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"
    Google Maps is nothing but a web-based service which provides data regarding geographical regions globally. In addition to conventional road maps, it offers terrain, satellite and road views of many places. It also offers street views comprising photographs taken by any person. This API is very useful for developers as they can customize maps with […]<\/p>\n","protected":false},"author":19,"featured_media":1038,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[13,5],"tags":[82],"yoast_head":"\nHow to create curved line in google map?<\/title>\n<meta name=\"description\" content=\"In this example, we are using Polyline(It is a linear overlay of connected line segments on the map, it also consists array of Latitude Longitude locations\" \/>\n<meta name=\"robots\" content=\"index, follow\" \/>\n<meta name=\"googlebot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta name=\"bingbot\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create curved line in google map?\" \/>\n<meta property=\"og:description\" content=\"In this example, we are using Polyline(It is a linear overlay of connected line segments on the map, it also consists array of Latitude Longitude locations\" \/>\n<meta property=\"og:url\" content=\"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/\" \/>\n<meta property=\"og:site_name\" content=\"Openweb Solutions Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/subhrarocks\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-21T11:33:30+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-01-22T06:28:41+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/01\/WsVvidL.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1385\" \/>\n\t<meta property=\"og:image:height\" content=\"694\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:creator\" content=\"@subhrajitdasgu1\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/\",\"name\":\"Openweb Solutions Blog\",\"description\":\"Transforming ideas into reality\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/openwebsolutions.in\/blog\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/wp-content\/uploads\/2019\/01\/WsVvidL.jpg\",\"width\":1385,\"height\":694,\"caption\":\"google curved line\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/#webpage\",\"url\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/\",\"name\":\"How to create curved line in google map?\",\"isPartOf\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/#primaryimage\"},\"datePublished\":\"2019-01-21T11:33:30+00:00\",\"dateModified\":\"2019-01-22T06:28:41+00:00\",\"author\":{\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/543c0027f07aa3058f55a31f279aadf7\"},\"description\":\"In this example, we are using Polyline(It is a linear overlay of connected line segments on the map, it also consists array of Latitude Longitude locations\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/openwebsolutions.in\/blog\/how-to-create-curved-line-in-google-map\/\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#\/schema\/person\/543c0027f07aa3058f55a31f279aadf7\",\"name\":\"Subhrajit Dasgupta\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/openwebsolutions.in\/blog\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/7f835b1b0871c424e21567b7cb5afc6b?s=96&r=g\",\"caption\":\"Subhrajit Dasgupta\"},\"sameAs\":[\"https:\/\/www.facebook.com\/subhrarocks\",\"https:\/\/twitter.com\/subhrajitdasgu1\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1012"}],"collection":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/users\/19"}],"replies":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/comments?post=1012"}],"version-history":[{"count":22,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1012\/revisions"}],"predecessor-version":[{"id":1044,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/posts\/1012\/revisions\/1044"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media\/1038"}],"wp:attachment":[{"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/media?parent=1012"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/categories?post=1012"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openwebsolutions.in\/blog\/wp-json\/wp\/v2\/tags?post=1012"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}