Coldfusion Google Maps and Jquery

Question

I have a google map which has dynamic markers and info boxes from a coldfusion query, i would like to be able to open the infowindow from a link on the page, i am using jquery for that but it is not working, what is the best way to do it.

My Script:

var map;

var lastinfowindow;

function initialize() {


    // Create an array of styles.
  var styles = [
    {
      stylers: [
        { hue: "#0b9cc1" },
        { saturation: -20 }
      ]
    },{
      featureType: "road",
      elementType: "geometry",
      stylers: [
        { lightness: 100 },
        { visibility: "simplified" }
      ]
    },{
      featureType: "administrative.country",
      elementType: "labels",
      stylers: [
        { visibility: "on" }
      ]
    },

    { featureType: "water", 
     elementType: "geometry", 
    stylers: [ { visibility: "on" }, { lightness: -10 }] },
    { featureType: "poi", 
    stylers: [ { visibility: "on" } ] }

  ];

  // Create a new StyledMapType object, passing it the array of styles,
  // as well as the name to be displayed on the map type control.
  var styledMap = new google.maps.StyledMapType(styles,
    {name: "Styled Map"}); 





    var latlng = new google.maps.LatLng(40, 13);
    var mapOptions = {
        zoom: 4,
        center: latlng,
        mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);

    var image = 'sp-mark.png';



   LatLng = new google.maps.LatLng ('23.00593', '120.65287');
            var marker38 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 1 - 38',
                icon:image
            });

            var infowindow38 = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 1</h3><p>Location: Tiawan</p>"
            });

            google.maps.event.addListener(marker38, 'click', function() {
             infowindow38.open(map,marker38);

            marker38.gig_id = 38;
            marker38.infowindow = infowindow38;
            markers[markers.length] = marker38;
            });



   LatLng = new google.maps.LatLng ('52.19173', '-1.7083');
            var marker30 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 2 - 30',
                icon:image
            });

            var infowindow30 = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 2</h3><p>Location: UK</p>"
            });

            google.maps.event.addListener(marker30, 'click', function() {
             infowindow30.open(map,marker30);

            marker30.gig_id = 30;
            marker30.infowindow = infowindow30;
            markers[markers.length] = marker30;
            });



   LatLng = new google.maps.LatLng ('38.98083', '1.30056');
            var marker32 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 3 - 32',
                icon:image
            });

            var infowindow32 = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 3</h3><p>Location: Ibiza</p>"
            });

            google.maps.event.addListener(marker32, 'click', function() {
             infowindow32.open(map,marker32);

            marker32.gig_id = 32;
            marker32.infowindow = infowindow32;
            markers[markers.length] = marker32;
            });



   LatLng = new google.maps.LatLng ('38.96', '1.39861');
            var marker41 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 4 - 41',
                icon:image
            });

            var infowindow41 = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 4</h3><p>Location: Ibiza</p>"
            });

            google.maps.event.addListener(marker41, 'click', function() {
             infowindow41.open(map,marker41);

            marker41.gig_id = 41;
            marker41.infowindow = infowindow41;
            markers[markers.length] = marker41;
            });



   LatLng = new google.maps.LatLng ('-33.92528', '18.42389');
            var marker47 = new google.maps.Marker({
                map: map,
                position: LatLng,
                title: 'Event 5 - 47',
                icon:image
            });

            var infowindow47 = new google.maps.InfoWindow({
            content: "<h3 class=maph3>Event 5</h3><p>Location: Cape Town</p>"
            });

            google.maps.event.addListener(marker47, 'click', function() {
             infowindow47.open(map,marker47);

            marker47.gig_id = 47;
            marker47.infowindow = infowindow47;
            markers[markers.length] = marker47;
            });




    //Associate the styled map with the MapTypeId and set it to display.
     map.mapTypes.set('map_style', styledMap);
     map.setMapTypeId('map_style');

     $(".order").click(function() {
        var thisorder = $(this).data("gig_id");
        for(var i=0; i<markers.length; i++) {
            if(markers[i].gig_id == thisorder) {
                console.log("found my match");
                //get the latlong
                if(lastinfowindow instanceof google.maps.InfoWindow) lastinfowindow.close();
                console.dir(markers[i]);
                map.panTo(markers[i].getPosition());
                markers[i].infowindow.open(map, markers[i]);
                lastinfowindow = markers[i].infowindow;
            }
        }
    });
}

This is the body:

<style>
    #map_canvas {
    width: 1250px; height: 550px;
    float:left;
    }
    #orders {
        margin-top: 0px;
        padding-top: 0px;
        margin-left: 10px;
        float:left;
        height: 550px;

    }
    .order {
        border-style:solid;
        border-width:thick;
            width: 300px;
            padding: 5px;
            cursor:pointer;
            margin-top:0px;
            font-family:Arial, Helvetica, sans-serif;
    }
    </style>


    <body onload="initialize()">

    <div id="map_canvas"></div>

    <div id="orders">

        <p class="order" data-gig_id="38">
        <b>Event 38</b><br/>
        Event 1
        </p>

        <p class="order" data-gig_id="30">
        <b>Event 30</b><br/>
        Event 2
        </p>

        <p class="order" data-gig_id="32">
        <b>Event 32</b><br/>
        Event 3
        </p>

        <p class="order" data-gig_id="41">
        <b>Event 41</b><br/>
        Event 4
        </p>

        <p class="order" data-gig_id="47">
        <b>Event 47</b><br/>
        Event 5
        </p>

    </div>

    </body>

I am using jquery to create the click function . I have already outputted the results, the map works fine but the links on the page to open the infowindow do not work, i am using an example by Raymond Camden.

Any help would be greatly appreciated.

Answer 1

You are trying to add the individual markers to an array which isn't defined. At the top of your initialize function, add

var markers = [];