Google map api painted a polyline with encoded dots

Question

I am new to javascript and the Google api map, so I encoded such points: "yzocFzynhVq} @n} @o} @nzD" and trying to make a polyline with it, I did not find topics or documents to solve my problem. There are several topics on how to decode them, but I do not need to do this. I just need to draw a polyline using encoded dots. Can someone give me an example?

Answer 1

See geometry library documentation for decodePath

This will convert your encoded string into an array of google.maps.LatLng objects that can be used to create Polyline

Working example

snippet of working code:

function initialize() { var myLatLng = new google.maps.LatLng(24.886436490787712, -70.2685546875); var mapOptions = { zoom: 13, center: myLatLng, mapTypeId: google.maps.MapTypeId.TERRAIN }; var bermudaTriangle; var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions); // Construct the polygon bermudaTriangle = new google.maps.Polygon({ paths: google.maps.geometry.encoding.decodePath("yzocFzynhVq}@n}@o}@nzD"), strokeColor: '#FF0000', strokeOpacity: 0.8, strokeWeight: 2, fillColor: '#FF0000', fillOpacity: 0.35 }); bermudaTriangle.setMap(map); map.setCenter(bermudaTriangle.getPath().getAt(Math.round(bermudaTriangle.getPath().getLength() / 2))); } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } @media print { html, body { height: auto; } #map_canvas { height: 650px; } } 

 <script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script> <div id="map_canvas"></div>