Google Map Encoded Polylines not displaying

Question

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>

In the script tag you are loading Google Maps JavaScript API v3, but in the code you are using classes from Google Maps JavaScript API v2. The v2 was deprecated a long time ago, this code shouldn't work. Check documentation and rewrite your code using v3. — xomena, Aug 24 '21 at 23:25

score 0 · Accepted Answer · answered Aug 25 '21 at 13:51

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

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>

Google Map Encoded Polylines not displaying

1 Answers1