CODEWITHSUNDEEP
javascriptgoogle-maps
user2102426
user2102426

Reputation: 9

My Google Maps API based code doesn't work

I copy source code of an example of an overlayed polyline from Google Maps API and it doesn't show anything when I execute that code from an .htm file. I've been learning about html, javascript and CSS but I can't solve this answer by myself. Here's the code I have so far:

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

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

    var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);

    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>

Upvotes: 0

Views: 1469

Answers (1)

Nix
Nix

Reputation: 58522

Its working you just can't see it. Add the following style to it:

#map_canvas{
    height:500px;
}

Fiddle: http://jsfiddle.net/ax6wg/

Upvotes: 2

Related Questions