Hello:
I seem to be having an issue when following the instructions here: https://github.com/openhab/openhab/wiki/GoogleMap
I cannot ever seem to get a pin drop in the map to identify my location. Owntracks reports it, and from the mosquitto log, I can see everything is logged in? Below are my item and .cfg files ( region based ), and the html site code that I am using. I can’t seem to figure out what I’m doing wrong, and I’ve noticed other posts with similar issues. I’d really like to get this working if possible. If anyone can please provide any insight, it would be greatly appreciated.
Items
/* OwnTracks - Mqttitude Testing Start */
Switch PresenceRob_PhoneMqtt "Rob @ Home" { mqttitude="mosquitto:owntracks/rhuehn/robphone/event:home" }
Switch PresenceRob_Work_PhoneMqtt "Rob @ Work" { mqttitude="mosquitto:owntracks/rhuehn/robphone/event:work" }
Location locationRob
String mqttPositionRobRaw "Rob Raw Data" { mqtt="<[home:owntracks/rhuehn/robphone:state:default]" }
String mqttRobLatitude "Rob's Lat"
String mqttRobLongitude "Rob's Lon"
String mqttRobAccuracy "Rob's Accuracy"
String mqttS6Battery "Rob's Galaxy S6 Battery [%s%%]" <battery> (Phone, MQTT, Battery)
Rule:
rule "MqttPostionParseRob"
when
Item mqttPositionRobRaw changed
then
val String json = (mqttPositionRobRaw.state as StringType).toString
// {"_type": "location", "lat": "xx.5010314", "lon": "8.3444293",
// "tst": "1422616466", "acc": "xx.05", "batt": "40"}
val String type = transform("JSONPATH", "$._type", json)
if (type == "location") {
val String lat = transform("JSONPATH", "$.lat", json)
val String lon = transform("JSONPATH", "$.lon", json)
val String acc = transform("JSONPATH", "$.acc", json)
val String batt = transform("JSONPATH", "$.batt", json)
mqttRobLatitude.postUpdate(lat)
mqttRobLongitude.postUpdate(lon)
locationRob.postUpdate(new PointType(lat + "," + lon))
mqttRobAccuracy.postUpdate(new DecimalType(acc))
mqttS6Battery.postUpdate(new PercentType(batt))
}
end
HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
<!--
.Flexible-container {
position: relative;
padding-bottom: 0px;
padding-top : 0px;
height : 345px ;
overflow: hidden;
}
.Flexible-container iframe,
.Flexible-container object,
.Flexible-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
-->
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places,drawing,geometry"></script>
<script type="text/javascript">
////////////////////////////////////////////////////////////////////////
// Google Maps JavaScript API:
// https://developers.google.com/maps/documentation/javascript/?hl=de
// Marker Icons:
// https://sites.google.com/site/gmapsdevelopment/
////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////////////////////
// JQuery
////////////////////////////////////////////////////////////////////////
var map = null;
//make an empty bounds variable
var bounds = new google.maps.LatLngBounds();
// LatLng's we want to show
var latlngHome = new google.maps.LatLng("xx.251359", "-xx.738599");
var latlngRob = new google.maps.LatLng("xx.251359", "-xx.738599"); // initialize to home ...
var latlngJenna = new google.maps.LatLng("xx.251359", "-xx.738599"); // initialize to home ...
var map_options = { center : latlngHome,
zoom : 10,
mapTypeId : google.maps.MapTypeId.ROADMAP };
$( "#map_canvas" ).ready($(function() {
var map_canvas = document.getElementById('map_canvas');
map = new google.maps.Map(map_canvas, map_options)
var marker = new google.maps.Marker({
position : latlngHome,
map : map,
icon : 'http://maps.google.com/mapfiles/kml/pal2/icon10.png',
title : "City"
})
var circle = new google.maps.Circle({
center : latlngHome,
radius : 500,
map : map,
strokeColor : '#050505',
strokeOpacity : 0.5,
strokeWeight : 2,
fillColor : '#000000',
fillOpacity : 0,
}); // end of [Circle]
bounds.extend(latlngHome);
}))
$( document ).ready($(function() {
// ******************************************************************************
$.ajax({
url : "http://192.168.0.80:8080/rest/items/locationRob/state/",
data : {},
success : function( data ) {
if ( map == null) { return; }
if ( data == "Uninitialized") { return; }
var coords = data.split(',');
var latlngRob = new google.maps.LatLng(coords[0],coords[1]);
var marker = new google.maps.Marker({
position : latlngRob,
map : map,
icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title : "Rob"
}) // end of [Marker]
$.ajax({
url : "../rest/items/mqttRobAccuracy/state/",
data : {},
success : function( data ) {
if ( data == "Uninitialized") { return; }
var accuracy = parseInt(data);
var circle = new google.maps.Circle({
center : latlngRob,
radius : accuracy,
map : map,
strokeColor : '#00FF00',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#00FF00',
fillOpacity : 0.35,
}); // end of [Circle]
bounds.extend(latlngRob);
map.fitBounds(bounds);
} // end of [function]
}) // end of [$.ajax]
} // end of [function]
}) // end of [$.ajax]
// ******************************************************************************
}))
</script>
</head>
<body>
<div id="map_canvas" class="Flexible-container" />
</body>
</html>