Question

I have a googlemap with several markers on it and I want to be able to open the info windows for each marker from an HTML list below the map.

I seem to understand that I need to use ‘trigger’ in my javascript code for the map, however, although I have found a couple of examples I don’t know how to get them working with my map.

the code for the map is as follows:

    function initialize() {
    var myLatlng = new google.maps.LatLng(51.751985, -1.257645);
    var myOptions = {
      center: myLatlng,
      zoom: 15,
      streetViewControl: true,
      scrollwheel: false,
      mapTypeId: google.maps.MapTypeId.TERRAIN    }

  var map = new google.maps.Map(document.getElementById("large_map"), myOptions);

var ctaLayer = new google.maps.KmlLayer('http://www.friendly-urls.com/OX_KML/ox_county_accom.kml?1841438804',{preserveViewport:true});
  ctaLayer.setMap(map);


  var shape = {
    coord: [26,0,30,1,30,2,30,3,30,4,30,5,30,6,30,7,30,8,30,9,30,10,30,11,30,12,30,13,30,14,30,15,30,16,26,17,23,18,22,19,21,20,20,21,19,22,18,23,18,24,17,25,17,26,16,27,16,28,16,29,16,30,14,30,14,29,14,28,14,27,13,26,13,25,12,24,12,23,11,22,10,21,9,20,8,19,7,18,4,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,0,3,0,2,0,1,4,0],
    type: 'poly'
    };

    var shadow = new google.maps.MarkerImage('images/markers/shadow.png',
    new google.maps.Size(47, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));

    //loop for markers

    var image1 = new google.maps.MarkerImage('core_functions/generate_markers.php?colour=green\u0026number=1',
    new google.maps.Size(31, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));

    var image2 = new google.maps.MarkerImage('core_functions/generate_markers.php?colour=red\u0026number=2',
    new google.maps.Size(31, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));

    var image3 = new google.maps.MarkerImage('core_functions/generate_markers.php?colour=green\u0026number=3',
    new google.maps.Size(31, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));

    var image4 = new google.maps.MarkerImage('core_functions/generate_markers.php?colour=purple\u0026number=4',
    new google.maps.Size(31, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));

    var image5 = new google.maps.MarkerImage('core_functions/generate_markers.php?colour=red\u0026number=5',
    new google.maps.Size(31, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));

    var image6 = new google.maps.MarkerImage('core_functions/generate_markers.php?colour=green\u0026number=6',
    new google.maps.Size(31, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));


    //end loop

    //info window and markers

    var infoWindow = new google.maps.InfoWindow();
    var markerBounds = new google.maps.LatLngBounds();
    var markerArray = [];

    function makeMarker(options){
      var pushPin = new google.maps.Marker({map:map});
      pushPin.setOptions(options);
      google.maps.event.addListener(pushPin, "click", function(){
        infoWindow.setOptions(options);
        infoWindow.open(map, pushPin);
      });
      markerBounds.extend(options.position);
      markerArray.push(pushPin);
      return pushPin;
    }

    google.maps.event.addListener(map, "click", function(){
      infoWindow.close();
    });

    //markers

    makeMarker({
      position: new google.maps.LatLng(51.68083, -1.30355),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "The White House",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/The White House-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/accommodation/3\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022The White House\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EThe White House\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EFaringdon Road, Shippon\u003C\u0062\u0072\u0020\u002F\u003EAbingdon\u003C\u0062\u0072\u0020\u002F\u003EOX13 6LW\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00631\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });

    makeMarker({
      position: new google.maps.LatLng(51.75286, -1.2672),
        shadow: shadow,
        icon: image2,
        shape: shape,
      title: "The Royal Oxford Hotel",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/The Royal Oxford Hotel-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/accommodation/1\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022The Royal Oxford Hotel\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EThe Royal Oxford Hotel\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EPark End Street\u003C\u0062\u0072\u0020\u002F\u003EOxford\u003C\u0062\u0072\u0020\u002F\u003EOX1 1HR\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00632\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });

    makeMarker({
      position: new google.maps.LatLng(51.636009, -1.605538),
        shadow: shadow,
        icon: image3,
        shape: shape,
      title: "Chowle Farmhouse",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Chowle Farmhouse-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/accommodation/7\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Chowle Farmhouse\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EChowle Farmhouse\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EA420\u003C\u0062\u0072\u0020\u002F\u003EFaringdon\u003C\u0062\u0072\u0020\u002F\u003ESN7 7SR\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00633\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });

    makeMarker({
      position: new google.maps.LatLng(52.054816, -1.33905),
        shadow: shadow,
        icon: image4,
        shape: shape,
      title: "Ashlea Guest House",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Ashlea Guest House-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/accommodation/8\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Ashlea Guest House\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EAshlea Guest House\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003E58 Oxford Road\u003C\u0062\u0072\u0020\u002F\u003EBanbury\u003C\u0062\u0072\u0020\u002F\u003EOX16 9AN\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00634\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });

    makeMarker({
      position: new google.maps.LatLng(51.847514, -1.354972),
        shadow: shadow,
        icon: image5,
        shape: shape,
      title: "The Feathers Hotel",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/The Feathers Hotel-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/accommodation/4\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022The Feathers Hotel\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EThe Feathers Hotel\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003E16-20 Market Street\u003C\u0062\u0072\u0020\u002F\u003EWoodstock\u003C\u0062\u0072\u0020\u002F\u003EOX20 1SX\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00635\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });

    makeMarker({
      position: new google.maps.LatLng(51.58841, -1.419162),
        shadow: shadow,
        icon: image6,
        shape: shape,
      title: "Alfreds Lodge",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Alfreds Lodge-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/accommodation/10\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Alfreds Lodge\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EAlfreds Lodge\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003E23 Ormond Road\u003C\u0062\u0072\u0020\u002F\u003EWantage\u003C\u0062\u0072\u0020\u002F\u003EOX12 8EG\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00636\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    //end markers

    map.fitBounds(markerBounds);

  }

Answer 1

In case anyone else needs the answer to this question here is what I have worked out…

var markerArray = [];

function initialize() {
    var myLatlng = new google.maps.LatLng(51.751985, -1.257645);
    var myOptions = {
      center: myLatlng,
      zoom: 15,
      streetViewControl: true,
      scrollwheel: false,
      scaleControl: true,
      scaleControlOptions: {
        position: google.maps.ControlPosition.BOTTOM},
      mapTypeId: google.maps.MapTypeId.TERRAIN
    }

    var map = new google.maps.Map(document.getElementById("towns_map"), myOptions);

    var ctaLayer = new google.maps.KmlLayer('http://www.midwinterdesign.net/OX_KML/ox_county_accom.kml?1848388335',{preserveViewport:true});
  ctaLayer.setMap(map);

    //marker vars

    var shape = {
    coord: [26,0,30,1,30,2,30,3,30,4,30,5,30,6,30,7,30,8,30,9,30,10,30,11,30,12,30,13,30,14,30,15,30,16,26,17,23,18,22,19,21,20,20,21,19,22,18,23,18,24,17,25,17,26,16,27,16,28,16,29,16,30,14,30,14,29,14,28,14,27,13,26,13,25,12,24,12,23,11,22,10,21,9,20,8,19,7,18,4,17,0,16,0,15,0,14,0,13,0,12,0,11,0,10,0,9,0,8,0,7,0,6,0,5,0,4,0,3,0,2,0,1,4,0],
    type: 'poly'
    };

    var shadow = new google.maps.MarkerImage('http://www.midwinterdesign.net/shadow.png',
    new google.maps.Size(47, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));

    //loop for markers

    var image1 = new google.maps.MarkerImage('http://www.midwinterdesign.net/blue.png',
    new google.maps.Size(31, 31),
    new google.maps.Point(0,0),
    new google.maps.Point(15, 31));


    //end loop

    //info window and markers

    var infoWindow = new google.maps.InfoWindow();
    var markerBounds = new google.maps.LatLngBounds();

    function makeMarker(options){
      var pushPin = new google.maps.Marker({map:map});
      pushPin.setOptions(options);
      google.maps.event.addListener(pushPin, "click", function(){
        infoWindow.setOptions(options);
        infoWindow.open(map, pushPin);
      });
      markerBounds.extend(options.position);
      markerArray.push(pushPin);
      return pushPin;
    }

    google.maps.event.addListener(map, "click", function(){
      infoWindow.close();
    });

    //markers

    makeMarker({
      position: new google.maps.LatLng(51.60629, -1.24043),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Didcot",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Didcot-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Didcot\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Didcot\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EDidcot\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EDidcot\u003C\u0062\u0072\u0020\u002F\u003EDidcot\u003C\u0062\u0072\u0020\u002F\u003EDidcot\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00631\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.59986, -1.124779),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Wallingford",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Wallingford-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Wallingford\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Wallingford\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EWallingford\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EWallingford\u003C\u0062\u0072\u0020\u002F\u003EWallingford\u003C\u0062\u0072\u0020\u002F\u003EWallingford\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00632\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.670316, -1.281568),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Abingdon",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Abingdon-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Abingdon\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Abingdon\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EAbingdon\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EAbingdon\u003C\u0062\u0072\u0020\u002F\u003EAbingdon\u003C\u0062\u0072\u0020\u002F\u003EAbingdon\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00633\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.7593, -1.59424),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Carterton",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Carterton-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Carterton\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Carterton\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003ECarterton\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003ECarterton\u003C\u0062\u0072\u0020\u002F\u003ECarterton\u003C\u0062\u0072\u0020\u002F\u003ECarterton\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00634\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.847795, -1.354328),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Woodstock",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Woodstock-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Woodstock\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Woodstock\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EWoodstock\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EWoodstock\u003C\u0062\u0072\u0020\u002F\u003EWoodstock\u003C\u0062\u0072\u0020\u002F\u003EWoodstock\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00635\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.58865, -1.426624),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Wantage",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Wantage-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Wantage\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Wantage\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EWantage\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EWantage\u003C\u0062\u0072\u0020\u002F\u003EWantage\u003C\u0062\u0072\u0020\u002F\u003EWantage\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00636\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.751982, -1.257648),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Oxford",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Oxford-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Oxford\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Oxford\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EOxford\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EOxford\u003C\u0062\u0072\u0020\u002F\u003EOxford\u003C\u0062\u0072\u0020\u002F\u003EOxford\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00637\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.65813, -1.58431),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Faringdon",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Faringdon-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Faringdon\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Faringdon\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EFaringdon\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EFaringdon\u003C\u0062\u0072\u0020\u002F\u003EFaringdon\u003C\u0062\u0072\u0020\u002F\u003EFaringdon\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00638\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.941315, -1.545757),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Chipping Norton",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Chipping Norton-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Chipping_Norton\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Chipping Norton\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EChipping Norton\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EChipping Norton\u003C\u0062\u0072\u0020\u002F\u003EChipping Norton\u003C\u0062\u0072\u0020\u002F\u003EChipping Norton\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u00639\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(52.060153, -1.340316),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Banbury",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Banbury-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Banbury\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Banbury\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EBanbury\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EBanbury\u003C\u0062\u0072\u0020\u002F\u003EBanbury\u003C\u0062\u0072\u0020\u002F\u003EBanbury\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u006310\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.807593, -1.636662),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Burford",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Burford-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Burford\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Burford\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EBurford\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EBurford\u003C\u0062\u0072\u0020\u002F\u003EBurford\u003C\u0062\u0072\u0020\u002F\u003EBurford\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u006311\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.902011, -1.154337),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Bicester",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Bicester-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Bicester\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Bicester\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EBicester\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EBicester\u003C\u0062\u0072\u0020\u002F\u003EBicester\u003C\u0062\u0072\u0020\u002F\u003EBicester\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u006312\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.746781, -0.977097),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Thame",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Thame-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Thame\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Thame\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EThame\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EThame\u003C\u0062\u0072\u0020\u002F\u003EThame\u003C\u0062\u0072\u0020\u002F\u003EThame\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u006313\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.5376, -0.904629),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Henley-on-Thames",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Henley-on-Thames-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Henley-on-Thames\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Henley-on-Thames\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EHenley-on-Thames\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EHenley-on-Thames\u003C\u0062\u0072\u0020\u002F\u003EHenley-on-Thames\u003C\u0062\u0072\u0020\u002F\u003EHenley-on-Thames\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u006314\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.820653, -1.28686),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Kidlington",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Kidlington-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Kidlington\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Kidlington\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EKidlington\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EKidlington\u003C\u0062\u0072\u0020\u002F\u003EKidlington\u003C\u0062\u0072\u0020\u002F\u003EKidlington\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u006315\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });


    makeMarker({
      position: new google.maps.LatLng(51.783417, -1.485488),
        shadow: shadow,
        icon: image1,
        shape: shape,
      title: "Witney",
      content: "\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0043\u006F\u006E\u0074\u0065\u006E\u0074\u0022\u003E\u003C\u0069\u006D\u0067\u0020\u0073\u0072\u0063\u003D\u0022/OxfordTravelGuide-SVN/images/image.php/Witney-1t.jpg?width=82&height=82&cropratio=1:1&image=/OxfordTravelGuide-SVN/images/towns/Witney\u002F\u0031\u002E\u006A\u0070\u0067\u0022\u0020\u0061\u006C\u0074\u003D\u0022Witney\u002D\u0031\u0022\u0020\u002F\u003E\u003C\u0064\u0069\u0076\u0020\u0063\u006C\u0061\u0073\u0073\u003D\u0022\u0077\u0069\u006E\u0064\u006F\u0077\u0054\u0065\u0078\u0074\u0022\u003E\u003C\u0068\u0034\u003EWitney\u003C\u002F\u0068\u0034\u003E\u0020\u003C\u0070\u003EWitney\u003C\u0062\u0072\u0020\u002F\u003EWitney\u003C\u0062\u0072\u0020\u002F\u003EWitney\u003C\u0062\u0072\u0020\u002F\u003E\u003C\u0061\u0020\u0068\u0072\u0065\u0066\u003D\u0022\u0023\u0061\u0063\u006316\u0022\u003Edetails →\u003C\u002F\u0061\u003E\u003C\u002F\u0070\u003E\u003C\u002F\u0064\u0069\u0076\u003E\u003C\u002F\u0064\u0069\u0076\u003E"
    });



    //end markers

map.fitBounds(markerBounds);


  }

function myclick(i) {
google.maps.event.trigger(markerArray[i], "click");
}

with the following to html links:

    <ul>
    <li><a href="#towns_map" onClick="javascript:myclick(0)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(1)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(2)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(3)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(4)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(5)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(6)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(7)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(8)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(9)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(10)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(11)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(12)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(13)">LINK</li>
    <li><a href="#towns_map" onClick="javascript:myclick(14)">LINK</li>
</ul>