I'm trying to plot the TI sensor data in an information window with GeoMarker and google maps. When I remove "@import 'ui/css/evothings-app.css';" from my code the map and the marker display correctly. However I do like your styles and fonts and when I use evothings-app.css then there is a grey box around the marker and it obscures the map at the point of interest. The complete test code is below - comment out the css line to view the effect. Appreciate your thoughts.
Cheers!
Peter
Code: Select all
<!DOCTYPE html>
<!--
MicroClimateLabs use of TI SensorTag JavaScript library.
Kudos to Evothings for the TI and BLE JavaScript Library
Custom code: (C)2015 µClimateLabs
-->
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="width=device-width, user-scalable=no
initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title>µClimateLabs Environment Sensors</title>
<style>
@import 'ui/css/evothings-app.css';
p.serif {
font-family: "Times New Roman", Times, serif;
}
p.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
h1.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
h2.sansserif {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<h1 class="sansserif">
<h2 class="sansserif">
<p class="sansserif">
</head>
<body>
<h2>µClimateLabs sensors for Personal Environment Monitoring (PEM)</h2>
<hr>
<p id="plotMap"></p>
<p><button class="w3-btn w3-blue" onclick="getLocation()">Locate Me </button></p>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/geolocationmarker/src/geolocationmarker-compiled.js"></script>
<script>
// SensorTag object.
var sensortag
// var x = document.getElementById("LatLon");
var d = new Date() ;
var n = d.getTime();
var dstr = d.toString();
var lat // latitude
var ltd // latitude
var lgt // longitude
var speed // speed
var altitude //
var heading
var localtimestamp;//
var markerTitle;
/**
Geolocation services
**/
var x=document.getElementById("plotMap");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition,showError);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
ltd=position.coords.latitude;
lgt=position.coords.longitude;
// lat=position.coords.latitude;
latlon=new google.maps.LatLng(ltd, lgt)
myMapholder=document.getElementById('mapholder')
myMapholder.style.height= '380px';
myMapholder.style.width='100%';
var mapOptions = {
zoom: 17,
center: latlon,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('mapholder'),
mapOptions);
var GeoMarker = new GeolocationMarker(map);
var infoWindow = new google.maps.InfoWindow({map: map});
infoWindow.setPosition(latlon);
infoWindow.setContent("markerTitle");
map.setCenter(latlon);
}
function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
x.innerHTML="User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML="Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML="The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML="An unknown error occurred."
break;
}
}
</script>
<hr>
<h2>Device info:</h2>
<p>
SensorTag device model: <span id="DeviceModel">?</span><br />
Firmware version: <span id="FirmwareData">?</span>
</p>
</body>
</html>
