Sign in to follow this  
Followers 0

google map API & panTo()

1 post in this topic

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")+"&deg;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>


';

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.