Please help me achieve adding Spiderfier effect to my existing Code. Shared below. I have tried few codes and examples from other Issue's which did not work for me.
// COUNTER
var k=1;
function myFunction()
{
setInterval(function(){
document.getElementById('spanSecond').innerHTML=10-k;
k++;
if(k>10){ k=1; timeout(); }
},1000);
}
myFunction();
var num=<?php echo $num;?>;
// In the following example, markers appear when the user clicks on the map.
// The markers are stored in an array.
// The user can then click an option to hide, show or delete the markers.
var map;
var markers = [];
function initialize() {
var haightAshbury = new google.maps.LatLng(<?php echo $cLat;?>, <?php echo $cLong; ?>);
var mapOptions = {
zoom: <?php echo $zvalue; ?>,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
timeout();
}
function timeout() {
downloadUrl("phpsqlajax_xml.php?UID=<?php echo $GPSUSERID;?>", function(data) {
var xml = data.responseXML;
deleteMarkers();
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var course = markers[i].getAttribute("course");
var dt_image = markers[i].getAttribute("dt_image");
var time = markers[i].getAttribute("deviceTime");
var speed = markers[i].getAttribute("speed");
var label = markers[i].getAttribute("deviceId");
var tdiff = markers[i].getAttribute("tdiff");
var Lat=parseFloat(markers[i].getAttribute("lat"));
var Lng=parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(Lat,Lng);
if(tdiff>=2)
{
var Acc="Off";
speed=0;
}
else var Acc="On";
// data sending stop before 2 min => Acc off
if(speed>1) {
var status=Math.round(speed*1.852) + " moving";
}
else {
var status="stopped"; // moving status according to speed
speed=0;
}
var html ='<div style="margin:1px !important; font-size:12px;">' + "<b>" + name + "</b> <br/>Angle : " + course + "<br/> Last Updated : " + time + "<br/> Acc : " + Acc + "<br/> Speed : " + Math.round(speed*1.852) + " kmph<br/>Lat : " + Lat + "<br/>Lng : " + Lng + "<br/>" + "<a href=tracking.php?DID=" + label + ">Tracking</a>" + " " + "<a href=playback.php?PlayBackDeviceId=" + label + "&Reset=1>Play Back</a>" + " " + "<a href=daily_distance_report.php?vehicle="+ label +">Reports</a>" + " " + "<a href=draw_geo_fence.php?deviceid="+ label+"&mapLat="+ Lat +"&mapLong="+ Lng +">Geo-Fence</a>" + '</div>' ;
document.getElementById("status"+label).innerHTML=status; // show status in div tag
if(num==(label))
{
map.panTo(new google.maps.LatLng(markers[i].getAttribute("lat"),markers[i].getAttribute("lng")));
GetAddressByGoogle('divMarkerAddress', Lat, Lng);
}
// Add a marker when click on the map
addMarker(point,dt_image,course,html,name,i);
}// loop end here
}); // downloadUrl end here
}
// Add a marker to the map and push to the array.
function addMarker(location,image,course,html,name,i) {
if(course<=22.5)
{
image = "images/"+image+"0.png"; // 0 angle img
}
else if (course<=67.5)
{
image = "images/"+image+"45.png"; // 45 angle img
}
else if (course<=112.5)
{
image = "images/"+image+"90.png"; // 90 angle img
}
else if (course<=157.5)
{
image = "images/"+image+"135.png"; // 135 angle img
}
else if (course<=202.5)
{
image = "images/"+image+"180.png"; // 180 angle img
}
else if (course<=247.5)
{
image = "images/"+image+"225.png"; // 225 angle img
}
else if (course<=292.5)
{
image = "images/"+image+"270.png"; // 270 angle img
}
else
{
image = "images/"+image+"315.png"; // 315 angle img
}
var marker = new MarkerWithLabel({
position: location,
icon:image,
labelContent: name,
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: {opacity: 0.75},
map: map
});
var infoWindow = new google.maps.InfoWindow({maxWidth:400});
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
markers.push(marker);
}
// Sets the map on all markers in the array.
function setAllMap(map) {
for (var i = 0; i < markers.length; i++) {
markers[i].setMap(map);
}
}
// Deletes all markers in the array by removing references to them.
function deleteMarkers() {
setAllMap(null);
markers = [];
}
google.maps.event.addDomListener(window, 'load', initialize);
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
///////////////////////////////////////////////////////////////
var geocoder = new google.maps.Geocoder();
//get geo location by name
function GetAddressByGoogle(t, lat, lng) {
if (!geocoder) {
geocoder = new google.maps.Geocoder();
}
if (lat != 0) {
var latlng = new google.maps.LatLng(lat, lng);
geocoder.geocode({ 'latLng': latlng }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (results[0]) {
document.getElementById(t).innerHTML=results[0].formatted_address;
}
}
});
}
}
Dear All,
Please help me achieve adding Spiderfier effect to my existing Code. Shared below. I have tried few codes and examples from other Issue's which did not work for me.