Coldfusion谷歌地图和Jquery

Question

我有一个谷歌地图，它具有动态标记和来自coldfusion查询的信息框，我希望能够从页面上的链接打开infowindow，我正在使用jquery，但它没有工作，那么最好的方法是什么。

我的脚本：

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; 
      } 
     } 
    }); 
} 

这是身体：

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

我使用jQuery创建点击功能。 我已经输出结果，地图工作正常，但页面上的链接打开infowindow不起作用，我使用雷蒙德卡姆登的例子。

任何帮助将不胜感激。

Answer 1

您正试图将单个标记添加到未定义的数组中。在初始化函数的顶部，添加

var markers = [];