I am new in javascript and Google map api, so i have encoded points like this: "yzocFzynhVq}@n}@o}@nzD" and trying to draw polyline with it, I haven't found topics or docs to solve my problem. There are few topics how to decode it, but I don't need to do that thing. I just need to draw polyline using encoded points. Could somebody give me example?

I am new in javascript and Google map api, so i have encoded points like this: "yzocFzynhVq}@n}@o}@nzD" and trying to draw polyline with it, I haven't found topics or docs to solve my problem. There are few topics how to decode it, but I don't need to do that thing. I just need to draw polyline using encoded points. Could somebody give me example?

• javascript
• html
• google-maps-api-3

Share Improve this question Follow edited Dec 31, 2013 at 4:50 Kara 6,2261616 gold badges5353 silver badges5858 bronze badges asked Oct 29, 2012 at 12:51 RomanRoman 13511 gold badge11 silver badge77 bronze badges 1

• 1 You want include the geometry library with the google maps API, it will be able to decode that encoded polyline string. – JasonWyatt Commented Oct 29, 2012 at 13:12

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

See the geometry library documentation for decodePath

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

Working example

working code snippet:

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./maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>