Created
September 13, 2013 04:39
-
-
Save matbor/6546840 to your computer and use it in GitHub Desktop.
Mysql -> Google Maps for mqttitude (using my mysql script). You need to add your google api key below to make it work.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $conn = mysql_connect("thebeast.localdomain", "root", "") or die(mysql_error()); | |
| mysql_select_db("mqtt") or die(mysql_error()); | |
| ?> | |
| <html> | |
| <head> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8"/> | |
| <title>Google Maps</title> | |
| <style type="text/css"> | |
| body { font: normal 10pt Helvetica, Arial; } | |
| #map { width: 1200px; height: 800px; border: 0px; padding: 0px; } | |
| </style> | |
| <script src="http://maps.google.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXX&sensor=false" type="text/javascript"></script> | |
| <script type="text/javascript"> | |
| //Borrowed the code from http://stackoverflow.com/questions/15633604/php-mysql-google-map | |
| var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", | |
| new google.maps.Size(32, 32), new google.maps.Point(0, 0), | |
| new google.maps.Point(16, 32)); | |
| var center = null; | |
| var map = null; | |
| var currentPopup; | |
| var bounds = new google.maps.LatLngBounds(); | |
| function addMarker(lat, lng, info) { | |
| var pt = new google.maps.LatLng(lat, lng); | |
| bounds.extend(pt); | |
| var marker = new google.maps.Marker({ | |
| position: pt, | |
| icon: icon, | |
| map: map | |
| }); | |
| var popup = new google.maps.InfoWindow({ | |
| content: info, | |
| maxWidth: 300 | |
| }); | |
| google.maps.event.addListener(marker, "click", function() { | |
| if (currentPopup != null) { | |
| currentPopup.close(); | |
| currentPopup = null; | |
| } | |
| popup.open(map, marker); | |
| currentPopup = popup; | |
| }); | |
| google.maps.event.addListener(popup, "closeclick", function() { | |
| map.panTo(center); | |
| currentPopup = null; | |
| }); | |
| } | |
| function initMap() { | |
| map = new google.maps.Map(document.getElementById("map"), { | |
| center: new google.maps.LatLng(0, 0), | |
| zoom: 14, | |
| mapTypeId: google.maps.MapTypeId.ROADMAP, | |
| mapTypeControl: true, | |
| mapTypeControlOptions: { | |
| style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR | |
| }, | |
| navigationControl: true, | |
| navigationControlOptions: { | |
| style: google.maps.NavigationControlStyle.ZOOM_PAN | |
| } | |
| }); | |
| <?php | |
| $query = mysql_query("SELECT * FROM locations")or die(mysql_error()); | |
| while($row = mysql_fetch_array($query)) | |
| { | |
| $name = $row['tst']; | |
| $lat = $row['lat']; | |
| $lon = $row['lon']; | |
| $desc = $row['topic']; | |
| echo("addMarker($lat, $lon, '<b>$name</b><br />$desc');\n"); | |
| } | |
| ?> | |
| center = bounds.getCenter(); | |
| map.fitBounds(bounds); | |
| } | |
| </script> | |
| </head> | |
| <body onload="initMap()" style="margin:0px; border:0px; padding:0px;"> | |
| <div id="map"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
If you want the last 24hrs of data change the following;
to;
You can change the 1 DAY part to 1 HOUR as well!