Google Maps V3 Polyline loading fails

Question

I need help with Google Maps Polyline

I just downloaded this code ( just a simple map) and it works just fine . I have signed up for a google API .

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>

      <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false">
    </script>
    <script type="text/javascript">
      function initialize() {
        var myOptions = {
          center: new google.maps.LatLng(-34.397, 150.644),
          zoom: 8,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            myOptions);
      }
    </script>
  </head>

  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

But this one does not work on from my computer ??

Any reason why , Please help

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps JavaScript API v3 Example: Polyline Simple</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false"></script>
<script type="text/javascript">

  function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var myOptions = {
      zoom: 3,
      center: myLatLng,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var flightPlanCoordinates = [
        new google.maps.LatLng(37.772323, -122.214897),
        new google.maps.LatLng(21.291982, -157.821856),
        new google.maps.LatLng(-18.142599, 178.431),
        new google.maps.LatLng(-27.46758, 153.027892)
    ];
    var flightPath = new google.maps.Polyline({
      path: flightPlanCoordinates,
      strokeColor: "#FF0000",
      strokeOpacity: 1.0,
      strokeWeight: 2
    });

   flightPath.setMap(map);
  }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas"></div>
</body>

</html>

Debug(when it works fine ) :

[12:46:00.874] file:///C:/Users/Haile/Desktop/polyoverflow.html
[12:46:00.974] GET https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&sensor=false [HTTP/1.1 200 OK 6738ms]
--
[12:46:07.779] GET https://maps.gstatic.com/intl/en_us/mapfiles/api-3/8/11/main.js [HTTP/1.1 304 Not Modified 667ms]
[12:46:08.622] Error in parsing value for 'background'.  Declaration dropped. @ file:///C:/Users/Haile/Desktop/polyoverflow.html
[12:46:08.718] GET https://maps.gstatic.com/mapfiles/openhand_8_8.cur [HTTP/1.1 304 Not Modified 4200ms]
[12:46:08.744] GET https://maps.gstatic.com/mapfiles/transparent.png [HTTP/1.1 304 Not Modified 6536ms]
[12:46:08.776] GET https://maps.gstatic.com/mapfiles/undo_poly.png [HTTP/1.1 304 Not Modified 2389ms]
[12:46:08.792] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=7&y=3&z=3&s=&style=api%7Csmartmaps [HTTP/1.1 200 OK 3746ms]
[12:46:08.808] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=7&y=4&z=3&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 8703ms]
[12:46:08.826] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=0&y=3&z=3&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK 7659ms]
[12:46:08.845] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=0&y=4&z=3&s=Gali&style=api%7Csmartmaps [HTTP/1.1 200 OK 8420ms]
[12:46:08.863] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=6&y=3&z=3&s=Galil&style=api%7Csmartmaps [HTTP/1.1 200 OK 16613ms]
[12:46:08.890] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=6&y=4&z=3&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK 12093ms]
[12:46:08.914] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=1&y=3&z=3&s=Galile&style=api%7Csmartmaps [HTTP/1.1 200 OK 19585ms]
[12:46:08.939] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=1&y=4&z=3&s=Galileo&style=api%7Csmartmaps [HTTP/1.1 200 OK 2753ms]
[12:46:08.963] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=5&y=3&z=3&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 12625ms]
[12:46:08.988] GET https://mts1.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=5&y=4&z=3&s=Gal&style=api%7Csmartmaps [HTTP/1.1 200 OK 9987ms]
[12:46:09.014] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=2&y=3&z=3&s=G&style=api%7Csmartmaps [HTTP/1.1 200 OK 8728ms]
[12:46:09.047] GET https://mts0.googleapis.com/vt?lyrs=t@128,r@177000000&src=apiv3&hl=en-US&x=2&y=4&z=3&s=Ga&style=api%7Csmartmaps [HTTP/1.1 200 OK 2984ms]
[12:46:09.078] GET https://maps.googleapis.com/maps/api/js/ViewportInfoService.GetViewportInfo?1m6&1m2&1d-67.60159243714006&2d-180&2m2&1d67.60159243714006&2d180&2u3&4sen-US&5e4&6sr%40177000000&7b0&8e0&9b0&callback=_xdc_._q07umg&token=24170 [HTTP/1.1 200 OK 10083ms]
[12:46:09.294] GET https://maps.gstatic.com/mapfiles/google_white.png [HTTP/1.1 304 Not Modified 2013ms]
[12:46:09.329] GET https://maps.gstatic.com/mapfiles/mv/imgs8.png [HTTP/1.1 304 Not Modified 2413ms]
[12:46:09.367] GET https://maps.gstatic.com/mapfiles/cb/mod_cb_scout/cb_scout_sprite_api_003.png [HTTP/1.1 304 Not Modified 3958ms]
[12:46:09.404] GET https://maps.gstatic.com/mapfiles/rotate2.png [HTTP/1.1 304 Not Modified 2713ms]
[12:46:09.441] GET https://maps.gstatic.com/mapfiles/szc4.png [HTTP/1.1 304 Not Modified 7609ms]
[12:46:10.190] GET https://maps.googleapis.com/maps/gen_204?ev=api_viewport&cad=src:apiv3,ts:1336902369211 [HTTP/1.0 200 Connection established 25338ms]
[12:46:12.591] GET https://maps.googleapis.com/maps/gen_204?ev=api_ads&cad=src:apiv3,ads:0 [HTTP/1.1 204 No Content 2181ms]
[12:46:13.461] GET https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1sfile%3A%2F%2F%2FC%3A%2FUsers%2FHaile%2FDesktop%2Fpolyoverflow.html&4sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&5e1&callback=_xdc_._q8yv43&token=112869 [HTTP/1.0 200 Connection established 12274ms]
--
[12:46:20.489] GET https://maps.googleapis.com/maps/gen_204?ev=api_marker&cad=src:apiv3,m:2,d:0,s:0 [HTTP/1.1 204 No Content 660ms]
--
[12:46:29.340] GET https://csi.gstatic.com/csi?v=2&s=mapsapi3&action=apiboot&rt=jl.737,mc.784,mb.871,vt.20582,prt.20582,plt.20535,mt.20583&size=1366x246&maptype=r [HTTP/1.1 204 No Content 7383ms]
--
[12:46:38.478] GET https://maps.googleapis.com/maps/api/js/QuotaService.RecordEvent?1sfile%3A%2F%2F%2FC%3A%2FUsers%2FHaile%2FDesktop%2Fpolyoverflow.html&3sAIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y&4e1&5e0&6u1&7s5x64nd&callback=_xdc_._9r0xgo&token=4472 [HTTP/1.1 200 OK 697ms]

Michael come lately · Accepted Answer · 2017-07-17 13:25:45Z

You have included Google's CSS. Take that out and define your own, similar to your working example. You may need height:100%; width:100% though, instead of just setting the height.

function initialize() {
    var myLatLng = new google.maps.LatLng(0, -180);
    var myOptions = {
        zoom: 3,
        center: myLatLng,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var flightPlanCoordinates = [
        new google.maps.LatLng(37.772323, -122.214897),
        new google.maps.LatLng(21.291982, -157.821856),
        new google.maps.LatLng(-18.142599, 178.431),
        new google.maps.LatLng(-27.46758, 153.027892)
    ];
    var flightPath = new google.maps.Polyline({
        path: flightPlanCoordinates,
        strokeColor: "#FF0000",
        strokeOpacity: 1.0,
        strokeWeight: 2
    });

   flightPath.setMap(map);
}
initialize();

html { height: 100% ; width: 100%}
      body { height: 100%; width:100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%; width:100% }

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD4nINMTYXMM9Mkb35C8Jy_mZ--grp9B1Y"></script>
<div id="map_canvas"></div>

Life Saver ! Many thanks Andrew for the fast and Efficient Reply. — haile, Commented May 11, 2012 at 10:57
Andrew can you please check this one : stackoverflow.com/questions/10570085/… — haile, Commented May 13, 2012 at 7:44
I've rearranged the content into various panes and external resources at jsfiddle.net/d9TMF/61 — Michael come lately, Commented Apr 8, 2014 at 21:25

Collectives™ on Stack Overflow

Google Maps V3 Polyline loading fails

1 Answer 1

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Linked

Related