Can anyone explain what i am doing wrong here? I am working with jQuery $.getJSON along with Google Maps both of which i am a newbie. Originally I was using standard JavaScript but have decided to using jQuery because XMLHttpRequest was not working in Chrome or within jsfiddle and it is to my understand that I will not have to worry about these issues using .$getJSON, however i now have to reconstruct my code to work properly in jQuery.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Google Maps Multiple Markers - jQuery JSON</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.ui.map.js"></script>
</head>
<body>
<div id="map_canvas" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
$(function(){
$('#map_canvas').gmap().bind('init', function(){
$.getJSON('http://www.artectodesignstudios.com/RSSData.txt', function(data){
$.each(data.title, function(i, marker){
$('#map_canvas').gmap('addMarker',{
'position': new google.maps.LatLng(marker[i]["geo:lat"], marker[i]["geo:long"]),
'bounds':true
}).click(function(){
$('#map_canvas').gmap('openInfoWindow', {'content': marker.content}, this);
});
});
});
});
});
<script>
</body>
</html>
