Hi
I can not get google map to work, I have used this viki https://github.com/openhab/openhab1-addons/wiki/GoogleMap but it does not show my phone
item part
String mqttPositionBrianRaw "Brian Raw Data" { mqtt="<[mybroker:owntracks/openhab/brian:state:default]" }
String mqttBrianLatitude "Brians Lat"
String mqttBrianLongitude "Brians Lon"
String mqttBrianAccuracy "Brians Accuracy"
String mqttiphoneBattery "Brian's Iphone Battery [%s%%]" <battery> (Phone, MQTT, Battery)
Rules part
import org.openhab.core.library.types.*
rule "MqttPostionBrian"
when
Item mqttPositionBrianRaw changed
then
val String json = (mqttPositionBrianRaw.state as StringType).toString
// {"_type": "location", "lat": "47.5010314", "lon": "8.3444293",
// "tst": "1422616466", "acc": "21.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)
mqttBrianLatitude.postUpdate(lat)
mqttBrianLongitude.postUpdate(lon)
locationBrian.postUpdate(new PointType(lat + "," + lon))
mqttBrianAccuracy.postUpdate(new DecimalType(acc))
mqttiphoneBattery.postUpdate(new PercentType(batt))
}
end
html part
<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("56.136074", "9.349452");
var latlngBrian = new google.maps.LatLng("56.136074", "9.349452"); // 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 : "Ehrendingen"
})
var circle = new google.maps.Circle({
center : latlngHome,
radius : 1500,
map : map,
strokeColor : '#050505',
strokeOpacity : 0.5,
strokeWeight : 2,
fillColor : '#000000',
fillOpacity : 0,
}); // end of [Circle]
bounds.extend(latlngHome);
}))
$( document ).ready($(function() {
// ******************************************************************************
$.ajax({
url : "../rest/items/locationBrian/state/",
data : {},
success : function( data ) {
if ( map == null) { return; }
if ( data == "Uninitialized") { return; }
var coords = data.split(',');
var latlngBrian = new google.maps.LatLng(coords[0],coords[1]);
var marker = new google.maps.Marker({
position : latlngBrian,
map : map,
icon : 'http://maps.google.com/mapfiles/ms/icons/green-dot.png',
title : "Brian"
}) // end of [Marker]
$.ajax({
url : "../rest/items/mqttBrianAccuracy/state/",
data : {},
success : function( data ) {
if ( data == "Uninitialized") { return; }
var accuracy = parseInt(data);
var circle = new google.maps.Circle({
center : latlngBrian,
radius : accuracy,
map : map,
strokeColor : '#00FF00',
strokeOpacity : 0.8,
strokeWeight : 2,
fillColor : '#00FF00',
fillOpacity : 0.35,
}); // end of [Circle]
bounds.extend(latlngBrian);
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>
pls help
i am using OH2 and mosquitto on raspberrypi 3
an my owntracks and mosquitto works