google-mapsgoogle-maps-api-3api-keygoogle-polyline

Google Map Encoded Polylines not displaying

I used to have a working Google map HTML page saved on my computer, with several years and 100's of tracks displayed with encoded polylines (GPolyline.fromEncoded). Since Google map changes something in their API, I am not able to display anything. I have generated a key, but nothing is displayed.

I'm using the following code, but nothing seems to work. I know how to generate an API Key (I have a simple example from Google Map working with my API Key, but this simple example is not with encoded polylines). If there is an expert out there that could lead me on the right direction, that would be great! Thank you!

<html>
<head>
<title>MAP</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?libraries=geometry&amp;sensor=false"></script>
 <script type="text/javascript">
      function load()
          {
          var map = new GMap2(document.getElementById("map"));
          map.setCenter(new GLatLng(49.00,-108.10), 3);      
var TACOMA = new GPolyline.fromEncoded({
  color: "#0000ff",
  weight: 4,
  opacity: 0.8,
  points: "ynq`HhymiVrBbDd@Z^CZSzHuL~BqGrAqCr@sBN{@AkAcJRwG\\kIJqNd@eE?yHs@iE}@eFaBy]}Ns_@_Oa@u@SsATuVMqEQiCg@gDaA}C_EgIuA}B{AuDs@uDQaBMwERiFl@uDfBuFdAmCpHgQJk@~CeKLaCCo@YsBYu@g@u@qAy@yAIq@LmIpEiEtBsCfAqG|AeCd@aGt@uSbEoItCwOlGuCr@}Eb@yEQiE}@_A]}BiAcEeDsAyAmRmWeAiA_CgBaCu@kBYiDHsCl@{At@}ChCgX`^wFzGuFlG}DxDcR~RwDjDiFhEibAjr@sDtBiCjAuW|JkEhAuKxBqM|CmR~F_Y~KoDnByDnCgDzCuDfEaU|XqEjFoVfX_EzFkB`DwEvIaKdSgChEoAxAmAdAyBtA}MxGqLtHsCvAqBz@wDbAkGf@mB@}CMuX}C}TmBgf@iAeO{B{EQ{DTcK`BcH|@_Rp@{AEsCJiKzAgEHqESeDi@oCs@yE_AmDG}E\\mEjAqFlD}CzCsM|Q_EfFg@`@cCxAwItGuIdH|EnO",
  levels: "PCBAFD@@CAH@@@DBGACACIBB@EAC@AD@BGBD@AB@E@CB@ICADA@DA@ADACBHCB@EAC@EBDBKACDADA@AEBG@BD@@BDCAGAB@BE@B@BAF@BBAIACAEAACCBEB@CAACEAC@@DBHCDB@D@@AFP",
  zoomFactor: 2, 
  numLevels: 18
});
map.addOverlay(TACOMA);     
map.addControl(new GSmallZoomControl3D(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,10)));
          map.addControl(new GMapTypeControl());
          map.removeMapType(G_HYBRID_MAP);            
          }
</script>
</head>
<BODY onload="load()">
<div id="map"></div>
<script
    bsrc="https://maps.googleapis.com/maps/api/js?key=[MY-API-KEY-WILL-GO-HERE]&callback=initMap&libraries=&v=weekly&channel=2"
    async
></script>
</BODY>
</html>

Solution

  • The posted code is using the deprecated and now turned off Google Maps Javascript API v2. To convert it see: Upgrading Your Maps JavaScript API Application from V2 to V3

    Or see the encoding namespace in the geometry library

    const polyline = new google.maps.Polyline({
    path: google.maps.geometry.encoding.decodePath("ynq`HhymiVrBbDd@Z^CZSzHuL~BqGrAqCr@sBN{@AkAcJRwG\\kIJqNd@eE?yHs@iE}@eFaBy]}Ns_@_Oa@u@SsATuVMqEQiCg@gDaA}C_EgIuA}B{AuDs@uDQaBMwERiFl@uDfBuFdAmCpHgQJk@~CeKLaCCo@YsBYu@g@u@qAy@yAIq@LmIpEiEtBsCfAqG|AeCd@aGt@uSbEoItCwOlGuCr@}Eb@yEQiE}@_A]}BiAcEeDsAyAmRmWeAiA_CgBaCu@kBYiDHsCl@{At@}ChCgX`^wFzGuFlG}DxDcR~RwDjDiFhEibAjr@sDtBiCjAuW|JkEhAuKxBqM|CmR~F_Y~KoDnByDnCgDzCuDfEaU|XqEjFoVfX_EzFkB`DwEvIaKdSgChEoAxAmAdAyBtA}MxGqLtHsCvAqBz@wDbAkGf@mB@}CMuX}C}TmBgf@iAeO{B{EQ{DTcK`BcH|@_Rp@{AEsCJiKzAgEHqESeDi@oCs@yE_AmDG}E\\mEjAqFlD}CzCsM|Q_EfFg@`@cCxAwItGuIdH|EnO"),
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    map: map
  });

    proof of concept fiddle

    screenshot of resulting map

    function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 3,
    center: {
      lat: 0,
      lng: -180
    },
    mapTypeId: "terrain",
  });

  const polyline = new google.maps.Polyline({
    path: google.maps.geometry.encoding.decodePath("ynq`HhymiVrBbDd@Z^CZSzHuL~BqGrAqCr@sBN{@AkAcJRwG\\kIJqNd@eE?yHs@iE}@eFaBy]}Ns_@_Oa@u@SsATuVMqEQiCg@gDaA}C_EgIuA}B{AuDs@uDQaBMwERiFl@uDfBuFdAmCpHgQJk@~CeKLaCCo@YsBYu@g@u@qAy@yAIq@LmIpEiEtBsCfAqG|AeCd@aGt@uSbEoItCwOlGuCr@}Eb@yEQiE}@_A]}BiAcEeDsAyAmRmWeAiA_CgBaCu@kBYiDHsCl@{At@}ChCgX`^wFzGuFlG}DxDcR~RwDjDiFhEibAjr@sDtBiCjAuW|JkEhAuKxBqM|CmR~F_Y~KoDnByDnCgDzCuDfEaU|XqEjFoVfX_EzFkB`DwEvIaKdSgChEoAxAmAdAyBtA}MxGqLtHsCvAqBz@wDbAkGf@mB@}CMuX}C}TmBgf@iAeO{B{EQ{DTcK`BcH|@_Rp@{AEsCJiKzAgEHqESeDi@oCs@yE_AmDG}E\\mEjAqFlD}CzCsM|Q_EfFg@`@cCxAwItGuIdH|EnO"),
    strokeColor: "#0000FF",
    strokeOpacity: 0.8,
    strokeWeight: 4,
    map: map
  });
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < polyline.getPath().getLength(); i++) {
    console.log(polyline.getPath().getAt(i).toUrlValue(6));
    bounds.extend(polyline.getPath().getAt(i));
  }
  map.fitBounds(bounds);
}
    html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
    <html>

<head>
  <title>MAP</title>
</head>

<body>
  <div id="map"></div>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=geometry&v=weekly&channel=2" async></script>
</body>

</html>