ri posto il codice javascript...
questo è quello giusto che funziona...
<script type="text/javascript">
var mapDiv,
map,
infobox;
jQuery(document).ready(function($) {
mapDiv = $("#directory-main-bar");
mapDiv.height(500).gmap3({
map: {
options: {
"draggable": true
,"mapTypeControl": true
,"mapTypeId": google.maps.MapTypeId.ROADMAP
,"scrollwheel": false
,"panControl": true
,"rotateControl": false
,"scaleControl": true
,"streetViewControl": true
,"zoomControl": true
}
},
marker: {
values: [
// inizio riga
{
latLng: [<%=rs(7)%>,<%=rs(8)%>],
options: {
icon: "directory/kord.png",
shadow: "directory/icon-shadow.png",
},
data: '<div class="marker-holder"><div class="marker-content with-image">[img]/cont_photo/foto/gruppi/<%=rs(1)%>.jpg[/img]<div class="map-item-info"><div class="title">'+"<%=rs(2)%>"+'</div><div class="address">'+"<%=rs(3)%>, <%=rs(4)%>, <%=rs(5)%>"+'</div>VIEW MORE</div><div class="arrow"></div><div class="close"></div></div></div></div>'
}
// fine riga
// la riga finale non deve avere la virgola
],
options:{
draggable: false
},
cluster:{
radius: 20,
// This style will be used for clusters with more than 0 markers
0: {
content: "<div class='cluster cluster-1'>CLUSTER_COUNT</div>",
width: 90,
height: 80
},
// This style will be used for clusters with more than 20 markers
20: {
content: "<div class='cluster cluster-2'>CLUSTER_COUNT</div>",
width: 90,
height: 80
},
// This style will be used for clusters with more than 50 markers
50: {
content: "<div class='cluster cluster-3'>CLUSTER_COUNT</div>",
width: 90,
height: 80
},
events: {
click: function(cluster) {
map.panTo(cluster.main.getPosition());
map.setZoom(map.getZoom() + 2);
}
}
},
events: {
click: function(marker, event, context){
map.panTo(marker.getPosition());
infobox.setContent(context.data);
infobox.open(map,marker);
// if map is small
var iWidth = 260;
var iHeight = 300;
if((mapDiv.width() / 2) < iWidth ){
var offsetX = iWidth - (mapDiv.width() / 2);
map.panBy(offsetX,0);
}
if((mapDiv.height() / 2) < iHeight ){
var offsetY = -(iHeight - (mapDiv.height() / 2));
map.panBy(0,offsetY);
}
}
}
}
},"autofit");
map = mapDiv.gmap3("get");
infobox = new InfoBox({
pixelOffset: new google.maps.Size(-50, -65),
closeBoxURL: '',
enableEventPropagation: true
});
mapDiv.delegate('.infoBox .close','click',function () {
infobox.close();
});
if(isTouchDevice()){
map.setOptions({ draggable : false });
var draggableClass = 'inactive';
var draggableTitle = 'Activate map';
var draggableButton = $('<div class="draggable-toggle-button '+draggableClass+'">'+draggableTitle+'</div>').appendTo(mapDiv);
draggableButton.click(function () {
if($(this).hasClass('active')){
$(this).removeClass('active').addClass('inactive') .text('Activate map');
map.setOptions({ draggable : false });
} else {
$(this).removeClass('inactive').addClass('active') .text('Deactivate map');
map.setOptions({ draggable : true });
}
});
}
});
</script>