Announcement

Collapse
No announcement yet.

Displaying Multiple Locations in Google Maps

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Displaying Multiple Locations in Google Maps

    I have been battling with this for ages. using JQuery I have been able to display a single location. But when it comes to Multiple Locations, I just can't seem to get things to work.

    I have found a ton of Open Source some amazing presentation, and others just straight up and down. Please can someone look at the below. This is exactly as per what was given for PHP.

    I copied this into a "Blank" Application, but just can make it work.



    /////////////////// Open Source Code ///////////////

    <!DOCTYPE html>
    <html>
    <head>
    <script
    src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sen sor=false">
    </script>

    <script>

    // Set location to centre on
    var myCenter=new google.maps.LatLng(51.508742,-0.120850);

    // Set other locations in array first title for marker, second coords
    var locations = [
    ['marker title1', -13.530825,-71.957565],
    ['marker title2', -13.531211,-71.961921],
    ['marker title3', -13.531336,-71.960387],
    ['marker title4', -13.533099,-71.960151],
    ['marker title5', -13.533985,-71.960751],
    ['marker title6', -13.535289,-71.962929],

    ['marker title7', -13.516617,-71.978872],
    ['marker title8', -13.515626,-71.975873],
    ['marker title9', -13.531847,-71.984493],
    ['marker title10', -13.50123,-72.031091],
    ['marker title11', -13.163152,-72.54581]
    ];


    function initialize()
    {

    //apply location marker to centre on
    var mapProp = {
    center:myCenter,
    zoom:5,
    mapTypeId:google.maps.MapTypeId.ROADMAP
    };

    var map=new google.maps.Map(document.getElementById("googleMap "),mapProp);

    var marker=new google.maps.Marker({
    position:myCenter,
    title: 'My centre location marker'
    });

    marker.setMap(map);


    // apply other location markers
    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,
    title: locations[i][0]
    });


    }

    }

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

    <body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
    </body>
    </html>
Working...
X