CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3dictionary
Stark
Stark

Reputation: 139

Google maps wont show up on the browser

I am trying to use the Google Map API V3 and display a map with a route between few geolocation points. So far I was able to generate a single path then I wrote the code below, It doesn't give any error in the JS while running but it wont show anything on the browser. I am not sure what is wrong and I might be doing the coding completely wrong. sorry for that.

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

    </style>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

          var start = [-33.890542, 151.274856];

          var end = [ -33.950198, 151.259302];
          var beaches = [

                        [ -33.923036, 151.259052],
                        [ -34.028249, 151.157507],
                        [ -33.80010128657071, 151.28747820854187]

                      ];

          var map;
          var mapOptions = { center: new google.maps.LatLng(start[0], start[1]), zoom: 3,
            mapTypeId: google.maps.MapTypeId.ROADMAP };

          function DrawRoute(src,dest,i){
                      var d_Dis_name = 'directionsDisplay'+i
                      d_Dis_name = new google.maps.DirectionsRenderer({
                      suppressMarkers: false,
                      suppressInfoWindows: true
                    });
              d_Dis_name.setMap(map);
              var src = new google.maps.LatLng(src[0],src[1]);
              var dest = new google.maps.LatLng(dest[0],dest[1]);
              var request = {
                origin: src, 
                destination: dest,
                travelMode: google.maps.DirectionsTravelMode.DRIVING
              };

              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  d_Dis_name.setDirections(response);
                }
              });
          }

          function initialize() {
            directionsService = new google.maps.DirectionsService();
            var counter = 1;
            DrawRoute(start,beaches[0],counter);
            counter = counter +1;
            for (var x = 0; x < beaches.length-1; x++){
              DrawRoute(beaches[x],beaches[x+1],counter);
              counter = counter+1;
            }
            DrawRoute(beaches[beaches.length-1],end,counter);
          }
          google.maps.event.addDomListener(window, 'load', initialize);

    </script>

    <div id="map_canvas"></div>

what is wrong with this ?

Upvotes: 0

Views: 92

Answers (2)

KarelG
KarelG

Reputation: 5244

You have forgot to create a Google Maps object to add a map on your page.

//var map;
var mapOptions = { center: new google.maps.LatLng(start[0], start[1]), zoom: 3,
        mapTypeId: google.maps.MapTypeId.ROADMAP };
// create object
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

jsfiddle + create map object at google API v3 documentation

Upvotes: 2

Bas
Bas

Reputation: 2210

Give a width attribute in the tags? (not sure)

width: 100%;

Upvotes: 0

Related Questions