CODEWITHSUNDEEP
google-maps
Kim Brun Jørgensen
Kim Brun Jørgensen

Reputation: 65

Google Maps API not drawing polylines

I am trying to learn how to use the Google Maps API, and I've found a lot of good tutorials. Problem is, whenever I try to implement their code into my local HTML file, I don't see any polyline drawn on my Google Map.

Here's my code (note: I do have my API key in the script at the bottom):

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      html, body { height: 100%; margin: 0; padding: 0; }
      #map { height: 100%; }
    </style>

    <script type="text/javascript">
        var map;
        function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: {lat: 55.500, lng: 9.000},
            zoom: 10
          });
        }

        var encoded_data = "kpgiI}{wt@{xeDfxv@ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se@vdgAhdPya_BoabDipHoabDngiAsen@jz}@htcAzqt@itcAnha@|~eBdzh@qqnBf~w@zrlCjkx@fppAy{u@zflA{zRpeuC`zWh`]bmx@}byAlwn@ny{DncNn}nDsxd@uqG";
        var decode = google.maps.geometry.encoding.decodePath(encoded_data);

        var line = new google.maps.Polyline({
          path: decode,
          strokeColor: '#00008B',
          strokeOpacity: 1.0,
          strokeWeight: 4,
          zIndex: 3
        });

        line.setMat(map);
        lineArray.push(line);
    </script>
  </head>
  <body>
    <div id="map"></div>

    <script async defer
      src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&key=MY_KEY&callback=initMap">
    </script>
  </body>
</html>

Upvotes: 1

Views: 1076

Answers (1)

Vadim Gremyachev
Vadim Gremyachev

Reputation: 59328

You are loading Google Maps API using:

<script async defer
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>

where

The async attribute lets the browser render the rest of your website while the Maps API loads. When the API is ready, it will call the function specified using the callback parameter

In the provided example you are trying to utilize google.maps.geometry.encoding.decodePath function but geometry library could not be loaded at this moment.

There is a typo at line:

line.setMat(map); -> line.setMap(map);

Fixed example

var map;

function initMap() {
    map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 55.500, lng: 9.000 },
        zoom: 7

    });

    var encoded_data = "kpgiI}{wt@{xeDfxv@ylqC|flAyfyDidPiioBoabD_fkAyjfDooZ{nyCtw_BihCnzlBzbyAl}XehjBfp`B_se@vdgAhdPya_BoabDipHoabDngiAsen@jz}@htcAzqt@itcAnha@|~eBdzh@qqnBf~w@zrlCjkx@fppAy{u@zflA{zRpeuC`zWh`]bmx@}byAlwn@ny{DncNn}nDsxd@uqG";
    var decode = google.maps.geometry.encoding.decodePath(encoded_data);

    var line = new google.maps.Polyline({
        path: decode,
        strokeColor: '#00008B',
        strokeOpacity: 1.0,
        strokeWeight: 4,
        zIndex: 3
    });

    line.setMap(map);
}
 html, body {
            height: 100%;
            margin: 0;
            padding: 0;
}

#map {
    height: 100%;
}
<div id="map"></div>
<script async defer
            src="https://maps.googleapis.com/maps/api/js?libraries=geometry,drawing&callback=initMap">
</script>

Upvotes: 1

Related Questions