So far, and thanks to duncan, most of my questions are solved. But I came up to a new issue… It seems that I have to study jquery further… I have found an interesting tool for clustering. Fluster2 seems helpful but with no information on how to use it… None of the examples I managed [...]
Autor: AGP
So far, and thanks to duncan, most of my questions are solved. But I came up to a new issue… It seems that I have to study jquery further…
I have found an interesting tool for clustering. Fluster2 seems helpful but with no information on how to use it… None of the examples I managed to find online, give explanations how to use Fluster2 with jquery…
Below is my code…
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>My map</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="util.js"></script>
<script type="text/javascript">
google.load("maps", "3", {other_params : "sensor=false"});
google.load("jquery", "1.3.2");
function initialize() {
var myLatlng = new google.maps.LatLng(39.5, 25.1419);
var myOptions = {
zoom: 6,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
jQuery.get("genXML.php", {}, function(data) {
jQuery(data).find("marker").each(function() {
var marker = jQuery(this);
var latlng = new google.maps.LatLng(parseFloat(marker.attr("lat")), parseFloat(marker.attr("lng")));
var shop_type = parseInt(marker.attr("type"), 10);
var address = marker.attr("address");
var magazi = marker.attr("name");
var city = marker.attr("city");
var area = marker.attr("area");
var tk = marker.attr("postal");
switch(shop_type) {
case 0:
typos = "Something";
break;
case 1:
typos = "Grocery";
break;
case 2:
typos = "Coffee";
break;
// .........
case 19:
typos = "Bar";
break;
case 20:
typos = "Club";
break;
}
var markicon = "icons/0.png";
if (shop_type >= 1 && shop_type <= 20) {
markicon = "icons/32/" + shop_type + ".png";
} else { markicon = "icons/0.png"; }
var contentString = '<div><b style="font-size:14px">' + magazi + '</b><br/><i style="font-size:12px">' + typos + '</i><div style="float:right; margin-right:10px;"><img src="icons/b/' + shop_type + '.png" width="74" height="100" /></div><p style="font-size:12px"><b>?????????:</b> ' + address + '<br /><b>????:</b> ' + city + '<br /><b>???????:</b> ' + area + '<br /><b>T.K.:</b> ' + tk + '</p></div>';
infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latlng,
icon: markicon,
map: map
});
google.maps.event.addListener(marker, "click", function() {
infowindow.setContent(contentString);
infowindow.open(map, this);
});
});
});
}
google.setOnLoadCallback(initialize);
</script>
</head>
<body>
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
And the XML file has this structure:
<markers>
<marker name="Spot name 1" city="Fanari" area="Rodopi" address="Fanari" postal="67063" type="0" lat="40.96065055467095" lng="25.130796432495117"/>
<marker name="Spot name 2" city="Fanari" area="Rodopi" address="Fanari" postal="67063" type="0" lat="40.96065055467095" lng="25.192596532495117"/>
</markers>
So can someone help me out with this? Any help, idea or guide will be very much appreciated!!!
Related posts:
Comments on this entry (no comments)
Did you like this post? You can share your opinion with us! Simply click here.