Databases
StackOverflow2013
Postsdbo
PORefresh google map markers from mysql
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PORefresh google map markers from mysql
    text
    copied!<p>I can pull this information from my MySQL table and display what I need to but I would like some help on how to refresh this data every 5 seconds or so with the current code that I have. </p> <p>There isn't much data to show, just like 5 or 8 markers at any given time. I have included my current code that I use to pull the data. I am sort of OK with PHP/MySQL but very new to Google Maps. </p> <pre><code>&lt;script type='text/javascript'&gt; //This javascript will load when the page loads. jQuery(document).ready( function($){ //Initialize the Google Maps var geocoder; var map; var markersArray = []; var infos = []; geocoder = new google.maps.Geocoder(); var myOptions = { zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP } //Load the Map into the map_canvas div var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //Initialize a variable that the auto-size the map to whatever you are plotting var bounds = new google.maps.LatLngBounds(); //Initialize the encoded string var encodedString; //Initialize the array that will hold the contents of the split string var stringArray = []; //Get the value of the encoded string from the hidden input encodedString = document.getElementById("encodedString").value; //Split the encoded string into an array the separates each location stringArray = encodedString.split("****"); var x; for (x = 0; x &lt; stringArray.length; x = x + 1) { var addressDetails = []; var marker; //Separate each field addressDetails = stringArray[x].split("&amp;&amp;&amp;"); //Load the lat, long data var lat = new google.maps.LatLng(addressDetails[1], addressDetails[2]); var image = new google.maps.MarkerImage(addressDetails[3]); //Create a new marker and info window var marker = new google.maps.Marker({ map: map, icon: image, position: lat, content: addressDetails[0] }); //Pushing the markers into an array so that it's easier to manage them markersArray.push(marker); google.maps.event.addListener( marker, 'click', function () { closeInfos(); var info = new google.maps.InfoWindow({content: this.content}); //On click the map will load the info window info.open(map,this); infos[0]=info; }); //Extends the boundaries of the map to include this new location bounds.extend(lat); } //Takes all the lat, longs in the bounds variable and autosizes the map map.fitBounds(bounds); //Manages the info windows function closeInfos(){ if(infos.length &gt; 0){ infos[0].set("marker",null); infos[0].close(); infos.length = 0; } } }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id='input'&gt; &lt;?php //Initialize your first couple variables $encodedString = ""; //This is the string that will hold all your location data $x = 0; //This is a trigger to keep the string tidy //Now we do a simple query to the database // DB INFO CONNECTION IS HERE AND WORKS $result = mysql_query("SELECT * FROM `ulocation` WHERE `ul_lat`!='' AND `ul_long`!='' AND `ul_onduty`='1'",$db1); //Multiple rows are returned while ($row = mysql_fetch_array($result, MYSQL_NUM)) { //This is to keep an empty first or last line from forming, when the string is split if ( $x == 0 ) { $separator = ""; } else { //Each row in the database is separated in the string by four *'s $separator = "****"; } $status='0'; $cadd = sql::getval('cal_address', 'call', "WHERE `cal_id`='$row[14]'"); $num = sql::getval('cal_num', 'call', "WHERE `cal_id`='$row[14]'"); $pcond = sql::getval('cal_pcond', 'call', "WHERE `cal_id`='$row[14]'"); $list="$num $cadd"; //Saving to the String, each variable is separated by three &amp;'s $encodedString = $encodedString.$separator. "&lt;table border=0 width='350' height='20' class='maincolm' cellpadding=0 cellspacing=0&gt;&lt;td align=left valign=top&gt;&lt;h2&gt;&lt;/h2&gt;&lt;/td&gt;&lt;tr&gt;&lt;td width=100%&gt;&lt;font size=3 face=arial&gt;&lt;p&gt;&lt;b&gt;".$row[2]. "&lt;/b&gt;". "&lt;br&gt;Address: $list". "&lt;br&gt;Call Type: $pcond". "&lt;br&gt;&lt;br&gt;Lat: ".$row[5]. "&lt;br&gt;Long: ".$row[6]. "&lt;/td&gt;&lt;/table&gt;". "&lt;/p&gt;&amp;&amp;&amp;".$row[5]."&amp;&amp;&amp;".$row[6]."&amp;&amp;&amp;".$row[8]."&amp;&amp;&amp;".$row[14]; $x = $x + 1; } ?&gt; &lt;input type="hidden" id="encodedString" name="encodedString" value="&lt;?php echo $encodedString; ?&gt;" /&gt; &lt;? echo "&lt;body oncontextmenu=\"return false\" style=\"overflow: hidden; \" topmargin=0 leftmargin=0 rightmargin=0 bottommargin=0&gt;"; &lt;div id=\"map_canvas\"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;"; ?&gt; </code></pre> <p> </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload