jQuery gMap plugin->problem with dynamically built options_问答_开发者

jQuery gMap plugin->problem with dynamically built options

开发者 https://www.devze.com 2023-03-31 11:11 出处：网络

Using jQuery plugin gMap from http://gmap.nurtext.de/. I can\'t understand why the first (commented out) call works and shows the map correctly

Using jQuery plugin gMap from http://gmap.nurtext.de/.

I can't understand why the first (commented out) call works and shows the map correctly but the second one (dynamically built) doesn't work. The second one shows a map but with no markers and zoomed out all the way.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>GMap Test</title>
    <script src="/assets/js/jquery-1.6.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=My_API_Key"></script>
    <script type="text/javascript" src="/assets/js/jquery.gmap-1.1.0.js"></script>
    <script>
      $(document).ready(function(){
        /*       
        $("#course_map").gMap({controls: true,
                               scrollwheel: true,
                               markers: [{latitude: 44.5643,
                                          longitude:-88.1033,
                                          html: "Radisson/Oneida Casino<br />2040 Airport Drive<br />Green Bay, WI",
                                          icon: {image: "/images/gmap_pin_orange.png",
                                                 iconsize: [26, 46],
                                                 iconanchor: [12,46],
                                                 infowindowanchor: [12, 0]
                                                }
                                         },
                                         {latitude: 44.2674,
                                          longitude:-88.4383,
                                          html: "Radisson Paper Valley Hotel<br />333 W. College Avenue<br />Appleton, WI",
                                          icon: {image: "/images/gmap_pin_orange.png",
                                                 iconsize: [26, 46],
                                                 iconanchor: [12,46],
                                                 infowindowanchor: [12, 0]
                                                }
                                         }
                                         ],
                               zoom: 8
                              }
                             );
        */

        var markers = 'markers: [{latitude: 44.5643, '+
                      '           longitude:-88.1033, '+
                      '           html: "Radisson/Oneida Casino<br />2040 Airport Drive<br />Green Bay, WI", '+
                      '           icon: {image: "/images/gmap_pin_orange.png", iconsize: [26, 46], '+
                      '                  iconanchor: [12,46], '+
                      '                  infowindowanchor: [12, 0] '+
                      '                 } '+
                      '    开发者_StackOverflow社区      }, '+
                      '          {latitude: 44.2674,  '+
                      '           longitude:-88.4383,  '+
                      '           html: "Radisson Paper Valley Hotel<br />333 W. College Avenue<br />Appleton, WI",  '+
                      '           icon: {image: "/images/gmap_pin_orange.png", iconsize: [26, 46], '+
                      '                  iconanchor: [12,46], '+
                      '                  infowindowanchor: [12, 0] '+
                      '                 } '+
                      '          },';
        markers = markers.slice(0, -1);
        markers =       '{controls: true, scrollwheel: true, ' + markers + '], zoom: 8}';
        $("#course_map").gMap(markers);                  

      });                            
    </script>
  </head>
  <body>
    <div id="course_map" style="height:297px; width:380px;border: 2px solid #666;"></div>
  </body>
</html>

Can anyone help out here?

I am building the markers in a success function from an ajax call like this:

success: function(data) {
  var markers = { controls: true, scrollwheel: true, markers: [], zoom: 8 };
  $.each(data["events"], function(id, event) {
    // .. do other stuff with the data
    if(showmap) {
      // add location to maps list prevent multiples
      marker1 = { latitude: event['LocLatitude'],
                  longitude:event['LocLongitude'],
                  html: '"'+event['LocName']+'<br />'+event['LocAddress']+'<br />'+event['LocCity']+', '+event['LocState']+'"',
                  icon:{image: "/images/gmap_pin_orange.png",
                        iconsize: [26, 46],
                        iconanchor: [12,46],
                        infowindowanchor: [12, 0]
                       }
                };
      markers.markers.push(marker1);
    } // if(showmap)
  } // $.each(data["events"]
}, // success:

and then call it like this: