CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-mapsgoogle-maps-api-3
Jessica Clark
Jessica Clark

Reputation: 47

Google maps v3 api Map doesnt fully load

I am building an app that will have maps showing nearby eateries.

Map shows up, but takes a very long time to load, and never actually fully loads.

I am on a deadline with this, and I've tried a variety of solutions with no luck.

Someone please help!!!

See code below: 

    <!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Food & Drink</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>


<body>
  <div id="map" style="width: 360px; height: 300px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Little Shebas', 39.833691, -84.892375, 1],
      ['Roscoes Coffee Bar & Tap Room', 39.833891, -84.892130, 2],
      ['Ullerys Homemade Icecream', 39.834401, -84.889190, 3],
       ['Firehouse BBQ and Blues', 39.833630, -84.891887, 4],
      ['Tin Lizzie Cafe', 39.829140, -84.890857, 6]
      ['Joes Pizza', 39.834409, -84.889822, 5],
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 25,
      center: new google.maps.LatLng(39.830184, -84.893401),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
       position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
        }
      })(marker, i));
    }
    </script>
    </body>
    </html>

Upvotes: 1

Views: 774

Answers (2)

Jared Smith
Jared Smith

Reputation: 21926

I believe the problem in your array. Looking at the code in chrome dev tools it shows the locations array to contain 5 elements (not 6) the fifth of which is undefined. You're missing a comma after the 5th element and have a trailing comma after the last. Trying to access properties on that undefined element is throwing the javascript exception that's halting execution on the page. Also, at the initial zoom you have set nothing is visible. Zooming out reveals the map with your markers. Set your initial zoom in your map options to 14.

Upvotes: 1

James Taylor
James Taylor

Reputation: 6258

I cannot confirm the behavior you described. Everything seems to be working fine and your code looks like it should work.

Check out this working example of your code. I played around with the inital zoom level and adjusted the center. The center you had specified wasn't really near the markers and the zoom level was so high at first I thought the map wasn't loading.

var center = new google.maps.LatLng(39.833691, -84.892375);

google.maps.Map(document.getElementById('map'), {
    zoom: 15,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

Upvotes: 1

Related Questions