jQuery gMap plugin->problem with dynamically built options
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&v=2&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:
$("#course_map").gMap(markers);
加载中,请稍侯......
精彩评论