Issue with Google Maps Geomarker and evothings-app.css
Posted: 07:06, 09 Dec 2015
First of all, thank you for an excellent workbench for my TI project.
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
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>