How to add many markers in the correct way?

I have used the same code as sitepoint URL:

Why markers are not seen?



<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script>
    $(function() { // onload handler
      var melbourne = new google.maps.LatLng(-37.813611, 144.963056);
      var mapOptions = {
        zoom:      12,
        center:    melbourne,
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map($("#map_canvas")[0], mapOptions);

      var places =
        [
          {
            "title": "Flinders St Station",
            "description": "This is a pretty major train station.",
            "position": [
              -37.818078,
              144.966811
            ]
          },
          {
            "title": "Southern Cross Station",
            "description": "Did you know it used to be called Spencer St Station?",
            "position": [
              -37.818358,
              144.952417
            ]
          }
        ]

      var currentPlace = null;
      var info = $('#placeDetails');
      var icons = {
        'train':          'http://google-maps-icons.googlecode.com/files/train.png',
        'train-selected': 'http://google-maps-icons.googlecode.com/files/train.png'
      }


      $.getJSON('places.json', function(places) {
        $(places).each(function() {
          var place = this;
          var marker = new google.maps.Marker({
            position: new google.maps.LatLng(place.position[0], place.position[1]),
            map:      map,
            title:    place.title,
            icon:     icons['train']
          });

          google.maps.event.addListener(marker, 'click', function() {
            var hidingMarker = currentPlace;
            var slideIn = function(marker) {
              $('h1', info).text(place.title);
              $('p',  info).text(place.description);

              info.animate({right: '0'});
            }

            marker.setIcon(icons['train-selected']);

            if (currentPlace) {
              currentPlace.setIcon(icons['train']);

              info.animate(
                { right: '-320px' },
                { complete: function() {
                  if (hidingMarker != marker) {
                    slideIn(marker);
                  } else {
                    currentPlace = null;
                  }
                }}
              );
            } else {
              slideIn(marker);
            }
            currentPlace = marker;
          });
        });
      });
    });
  </script>
  <style>
    .map {
      width: 700px;

      /* The following are required to allow absolute positioning of the
       * info window at the bottom right of the map, and for it to be hidden
       * when it is "off map"
       */
      position: relative;
      overflow: hidden;
    }
    #placeDetails {
      position: absolute;
      width: 300px;
      bottom: 0;
      right: -320px;
      padding-left: 10px;
      padding-right: 10px;

      /* Semi-transparent background */
      background-color: rgba(0,0,0,0.8);
      color: white;
      font-size: 80%;

      /* Rounded top left corner */
      border-top-left-radius: 15px;
      -moz-border-radius-topleft: 15px;
      -webkit-border-top-left-radius: 15px;
    }

    /* Fit the text nicely inside the box */
    h1 {
      font-family: sans-serif;
      margin-bottom: 0;
    }
    #placeDetails p {
      margin-top: 0;
    }
  </style>
  <!--[if IE]>
  <style>
    html #placeDetails {
      background-color: black;
    }
  </style>
  <![endif]-->
</head>
<body>
  <div class='map'>
    <div id='map_canvas' style='height:500px; width: 700px'></div>
    <div id='placeDetails'>
      <h1></h1>
      <p></p>
    </div>
  </div>
</body>
</html>



Hi there,

Do you have a file called “places.json” in the same folder as this file on your web server?

$.getJSON('places.json', function(places) {