CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3google-maps-markers
D.R.
D.R.

Reputation: 3

Google Maps API v3 not loading all markers

I've had a look around, but no one seems to have a similar problem.

I'm trying to create a map that has 5 markers for 5 locations, but for some reason, the map only seems to be loading 4

Here's a link to my code http://urloritdidnthappen.appspot.com/501001

So what have I tried?

I had the thought that two of these markers were too close together. The one not showing (croEndMarker) was very close in location to hornsMarker. I removed hornsMarker, but to no avail.

Then, I swapped the co-ordinates of croEndMarker with those of hornsMarker. hornsMarker was then showing in the position of croEndMarker. Not sure what I was trying to rule out here, but suffice to say there is no black hole swallowing markers in that exact location

I really don't know what my next step should be. Is there a limitation to the amount of markers you can place in a specific area?

Thank you all very much for any help you can offer

TL;DR: Map won't show all 5 markers, please help. http://urloritdidnthappen.appspot.com/501001

As requested, the code itself:

      <script type="text/javascript">
        function initialize() {

          var brentX = new google.maps.LatLng(51.575363, -0.225273);
          var finCen = new google.maps.LatLng(51.60096, -0.192459);
          var horns = new google.maps.LatLng(51.58713,-0.121549);
          var finPar = new google.maps.LatLng(51.568574, -0.102657);
          var croEnd = new google.maps.LatLng(51.579656,-0.153775);

          var mapOptions = {
            center: new google.maps.LatLng(51.542492, -0.103394),
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };
          var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

          var brentXMarker = new google.maps.Marker({
            position: brentX,
            title: "Brent Cross"
          });

          var finCenMarker = new google.maps.Marker({
            position: finCen,
            title: "Finchley Central"
          });

          var hornsMarker = new google.maps.Marker({
            position: horns,
            title: "Hornsey"
          });

          var finParMarker = new google.maps.Marker({
            position: finPar,
            title: "Finsbury Park"
          });

          var croEndMarker = new google.maps.Marker({
            position: croEnd,
            title: "Crouch End"
          });


        brentXMarker.setMap(map);
        finCenMarker.setMap(map);
        hornsMarker.setMap(map);
        finParMarker.setMap(map);
        croEndMarker.setmap(map);

        }
        google.maps.event.addDomListener(window, 'load', initialize);
      </script>

  <div id="map-canvas" style="width: 1200px; height: 600px;" />

Upvotes: 0

Views: 1243

Answers (1)

Andy
Andy

Reputation: 63524

Watch your camelcase. It should be:

croEndMarker.setMap(map);

FWIW, this would have appeared in the console log as:

TypeError: croEndMarker.setmap is not a function

Upvotes: 1

Related Questions