SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Jun 2008
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to add many markers in the correct way?

    I have used the same code as sitepoint URL:

    Why markers are not seen?
    PHP Code:

    <!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> 

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,359
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

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

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •