it is giving the same output when I reduce the code as you have suggested.
I found what appears to be the problem This code is inside google maps javascript code. See below. When I put the categories tag outside the javascript code, it works properly. How do I get this to work then?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!--BROWSER TITLE-->
<title></title>
{embed=site/includes_header}
</head>
<body>
{embed=site/includes_bodyheader}
<div id="contentContainer">
<div id="content">
[removed]
//<![CDATA[
jQuery.noConflict(); jQuery(document).ready(function(){
//MAP ZOOM (0 to 20)
var zoomLevel = 11,
gMap = jQuery("#gMap"),
//iPad,iPhone,iPod…
deviceAgent = navigator.userAgent.toLowerCase(),
iPadiPhone = deviceAgent.match(/(iphone|ipod|ipad)/);
//iPad Stuff
if (iPadiPhone) {
//ADD MAP CONTROLS AND POST ARROWS
jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">‹</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">›</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div>');
} else {//IF NOT iPad
jQuery('#zoomIn').live('click',function(){
zoomLevel += 1;
gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
});
jQuery('#zoomOut').live('click',function(){
zoomLevel -= 1;
gMap.gmap3({action: 'setOptions', args:[{zoom:zoomLevel}]});
});
//ADD MAP CONTROLS AND POST ARROWS
jQuery("#footer").prepend('<div class="markerNav" title="Prev" id="prevMarker">‹</div><div id="markers"></div><div class="markerNav" title="Next" id="nextMarker">›</div><div id="mapTypeContainer"><div id="mapStyleContainer"><div id="mapStyle" class="satellite"></div></div><div id="mapType" title="Map Type" class="satellite"></div></div><div class="zoomControl" title="Zoom Out" id="zoomOut">images/zoomOut.png</div><div class="zoomControl" title="Zoom In" id="zoomIn">images/zoomIn.png</div>');
}
jQuery('body').prepend("<div id='target'></div>");
gMap.gmap3({
action: 'init',
onces: {
bounds_changed: function(){
var number = 0;
jQuery(this).gmap3({
action:'getBounds',
callback: function (){
//ADD MARKERS HERE - FORMAT IS AS FOLLOWS…
//add(jQuery(this), number += 1, "NAME", "URL","ADDRESS1
ADDRESS2","LATITUDE","LONGITUDE", 'THUMBNAIL');
{exp:weblog:categories weblog="accommodations"}
{if category_description}{category_description}{/if}
{/exp:weblog:categories}
}
});
}
}
},{
action: 'setOptions', args:[{
zoom:zoomLevel,
scrollwheel:false,
disableDefaultUI:true,
disableDoubleClickZoom:true,
draggable:true,
mapTypeControl:false,
panControl:false,
scaleControl:false,
streetViewControl:false,
zoomControl:false,
//MAP TYPE: 'roadmap', 'satellite', 'hybrid'
mapTypeId:'roadmap'
}]
});
function add(jQuerythis, i, title, link, excerpt, lati, longi, img){
jQuerythis.gmap3({
action : 'addMarker',
lat:lati,
lng:longi,
//PIN MARKER IMAGE
options: {icon: new google.maps.MarkerImage('images/pin.png')},
events:{
mouseover: function(marker){
jQuerythis.css({cursor:'pointer'});
jQuery('#markerTitle'+i+'').fadeIn({ duration: 200, queue: false }).animate({bottom:"32px"},{duration:200,queue:false});
jQuery('.markerInfo').removeClass('activeInfo').hide();
jQuery('#markerInfo'+i+'').addClass('activeInfo').show();
jQuery('.marker').removeClass('activeMarker');
jQuery('#marker'+i+'').addClass('activeMarker');
},
mouseout: function(){
jQuerythis.css({cursor:'default'});
jQuery('#markerTitle'+i+'').stop(true,true).fadeOut(200,function(){jQuery(this).css({bottom:"0"})});
},
click: function(marker){[removed] = link}
},
callback: function(marker){
var jQuerybutton = jQuery('<div id="marker'+i+'" class="marker"><div id="markerInfo'+i+'" class="markerInfo"><a href="http://+link+">'+img+'</a><h2><a href="http://+link+">'+title+'</a></h2><p>'+excerpt+'<a href="http://+link+class=markerLink">View Details →</a><div class="markerTotal">'+i+' / <span></span></div></div></div>');<br />
jQuerybutton.mouseover(function(){<br />
jQuerythis.gmap3({<br />
action:'panTo', <br />
args:[marker.position]<br />
});<br />
jQuery("#target").stop(true,true).fadeIn(1200).delay(500).fadeOut(1200);<br />
});<br />
jQuery('#markers').append(jQuerybutton);<br />
var numbers = jQuery(".markerInfo").length;<br />
jQuery(".markerTotal span").html(numbers);<br />
if(i == 1){<br />
jQuery('.marker:first-child').addClass('activeMarker').mouseover();<br />
}<br />
jQuerythis.gmap3({<br />
action:'addOverlay',<br />
content: '<div id="markerTitle'+i+'" class="markerTitle">'+title+'</div>',<br />
latLng: marker.getPosition()<br />
});<br />
} <br />
});<br />
}<br />
});<br />
//]]><br />
[removed]