• 0

google map API & panTo()

Asked by Craig Hopson,

 Share

Question

Collaborator

Craig Hopson

Posted
Posted

hi guys i have this code but i cant get the panto bit to work aby ideas?


<?
$result = mysql_query("SELECT * FROM location WHERE device = '$mapid' ORDER BY time ASC");
$num_rows = mysql_num_rows($result);
if ($num_rows >= 1){
while($row = mysql_fetch_array($result)){
$lat  = $row['latitude'];
$long = $row['longitude'];
}
}else{
$output = 'NO MAP DATA';
}

$output .= '
<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
	  html { height: 100% }
	  body { height: 100%; margin: 0; padding: 0 }
	  #map { height: 100% }
    </style>
    <script type="text/javascript"
	  src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC9drFQnsmuob_bO9wFITHv-5K2pM-lgD0&sensor=false">
    </script>
    <script type="text/javascript">
    var map;
function getCookie(c_name) {
var i,x,y,ARRcookies=document.cookie.split(";");
for (i=0;i<ARRcookies.length;i++) {
  x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
  y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
  x=x.replace(/^\s+|\s+$/g,"");
  if (x==c_name) {
   return unescape(y);
  }
}
}
function setCookie(c_name,value,exdays) {
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
var limit=getCookie("limit");
if ((limit == null) || (limit == "")) {
limit = 1000;
}
function test(optvalue) {
setCookie("limit",optvalue,365);
document.location.reload(true)
}
function load() {
var point;
var flightPlanCoordinates=new Array();
downloadUrl("http://chsites.co.uk/track/inc/maploc.php?id='.$mapid.'&name='.$member['id'].'&limit="+limit, function(data) {
  var xml = data.responseXML;
  var markers = xml.documentElement.getElementsByTagName("marker");
  var infowindow = new google.maps.InfoWindow();
  for (var i = 0; i < markers.length; i++) {
   point = new google.maps.LatLng(
				 parseFloat(markers[i].getAttribute("lat")),
				 parseFloat(markers[i].getAttribute("lon")));
   flightPlanCoordinates[i]=point;
   var marker = new google.maps.Marker( {
    position: new google.maps.LatLng(
			    parseFloat(markers[i].getAttribute("lat")),
			    parseFloat(markers[i].getAttribute("lon"))),
			    map: map
   }
   );
   google.maps.event.addListener(marker, "click", (function(marker, i) {
    return function() {
	 infowindow.setContent("SPEED:-"+markers[i].getAttribute("speed")+"<br>TIME:-"+markers[i].getAttribute("time")+"<br>DISTANCE:-"+markers[i].getAttribute("distance")+"<br>HEADING:"+markers[i].getAttribute("head")+"°N <br>ALTITUDE:"+markers[i].getAttribute("altitude")+"meters");
	 infowindow.open(map, marker);
    }
   }
   )(marker, i));
  }
  var flightPath = new google.maps.Polyline( {
   path: flightPlanCoordinates,
	   strokeColor: "#6699FF",
	   strokeOpacity: 0.8,
	   strokeWeight: 5
  }
  );
  flightPath.setMap(map);
}
);
var txt=document.getElementById("txt")
txt.innerHTML=new Date().toLocaleString();

map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng('.$lat.','.$long.'),
				  zoom: 13,
				  mapTypeId: google.maps.MapTypeId.ROADMAP,
				  mapTypeControl: false,
				  mapTypeControlOptions: {
   style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
  }
  ,
				  navigationControl: true,
				  navigationControlOptions: {
   style: google.maps.NavigationControlStyle.SMALL
  }
}
);
}
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() {
}
function clickroute(lati,long) {
	  var latLng = new google.maps.LatLng(lati, long); //Makes a latlng
	  map.panTo(latLng); //Make map global
  }

    </script>
  </head>
  <body onload="load()">
    <div id="map" style="width:600px; height:600px"></div>
Last refresh:-<div id="txt"></div>
Show
<select name="menu" onchange="test(this.value);">
  <option value="">how many</option>
	    <option value="50">50</option>
	    <option value="100">100</option>
	    <option value="250">250</option>
	    <option value="500">500</option>
	    <option value="1000">1000</option>
</select>
Points
<a href="" onclick="clickroute(51.433373, -0.712251)">test</a>
  </body>
</html>

';
[/CODE]

Link to comment
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

This topic is now closed to further replies.
 Share
Go to question listing

  • Recently Browsing   0 members

    • No registered users viewing this page.