Google Maps multiple pins example

        var directionsDisplay;
        var directionsService = new google.maps.DirectionsService();
        var map;

        function initialize() {
          directionsDisplay = new google.maps.DirectionsRenderer();

        // here we set up some lat/long co-ordinates for the places we want to mark
            var postlip = new google.maps.LatLng(51.939609,-2.002945);
            var whitehart = new google.maps.LatLng(51.953227, -1.964589);
        var risingsun = new google.maps.LatLng(51.938517, -2.029652);

    // set the map options, in this case we are centring the map on co-ords for 'postlip' (see above)
          var myOptions = {
            center: postlip,
            zoom: 12,
            mapTypeId: google.maps.MapTypeId.ROADMAP
          };

    // create the map object
          var map = new google.maps.Map(document.getElementById("map_canvas"),
              myOptions);


    // Let's make some markers...
    // each marker has a position, the name of the map it's on ('map'), a title and an icon.
    // I've also added some HTML content to display in the info windows that show when you click
           // Postlip
          var postlipMarker = new google.maps.Marker({
            position: postlip,
            map: map,
            title:"Postlip Hall",
            icon:"/img/wedding.png"
          });

          var postlipContent = '<div id="content">'+
            '<h2 id="firstHeading" class="firstHeading">Postlip Hall</h2>'+
            '<div id="bodyContent">'+
            '<p><img src="/img/barn.jpg" alt="Barn picture" style="float:left;margin-right:15px;">Enter via the long driveway and bear left at the fork. Then follow the signs to be directed to the car park</p>' +
            '</div>'+
            '</div>';

    // create the info window
          var postlipInfo = new google.maps.InfoWindow({
            content: postlipContent
          });

    // make the info window popup when you click the marker
    // we add a listener, tell it what to listen for and what to do when it triggers
          google.maps.event.addListener(postlipMarker, 'click', function() {
             postlipInfo.open(map,postlipMarker);
           });

          // White Hart

          var whitehartMarker = new google.maps.Marker({
            position: whitehart,
            map: map,
            title: "The White Hart Inn, Winchcombe",
            icon:"/img/hotel.png"
          })


          var whitehartContent = '<div id="content">'+
            '<h2 id="firstHeading" class="firstHeading">The White Hart, Winchcombe</h2>'+
            '<div id="bodyContent">'+
            '<p></p>' +
            '</div>'+
            '</div>';


             var whitehartInfo = new google.maps.InfoWindow({
                content: whitehartContent
              });

            google.maps.event.addListener(whitehartMarker, 'click', function() {
              whitehartInfo.open(map,whitehartMarker);
            });



          // Rising Sun

          var risingsunMarker = new google.maps.Marker({
            position: risingsun,
            map: map,
            title: "The Rising Sun Hotel, Cleeve Hill",
            icon:"/img/hotel.png"
          })


          var risingsunContent = '<div id="content">'+
            '<h2 id="firstHeading" class="firstHeading">The Rising Sun, Cleeve Hill</h2>'+
            '<div id="bodyContent">'+
            '<p><a href="http://www.oldenglishinns.co.uk/cheltenham/">Hotel website</a></p>' +
            '</div>'+
            '</div>';


             var risingsunInfo = new google.maps.InfoWindow({
                content: risingsunContent
              });

            google.maps.event.addListener(risingsunMarker, 'click', function() {
              risingsunInfo.open(map,risingsunMarker);
            });

          directionsDisplay.setMap(map);
        }


    // this is all directions stuff
    // it will show directions from a given point to 'postlip' (I used the co-ords rather than the variable though)

        function calcRoute(lat,lon) {
         var start = new google.maps.LatLng(lat,lon);
         var end = new google.maps.LatLng(51.939609,-2.002945);
          var request = {
            origin: start,
            destination: end,
            travelMode: google.maps.TravelMode.DRIVING
          };
          directionsService.route(request, function(result, status) {
            if (status == google.maps.DirectionsStatus.OK) {
              directionsDisplay.setDirections(result);
            }
          });
        }