I'm trying to show RSSI signal strength data in google heatmap. my data set is like this.
dataset = [ {39.4861233,-76.1590375,-71.00}, {39.4861237,-76.1590365,-80.00} ];
when I read google map documentation there is no any option to show RSSI data(2nd index of array). but there is a way to add weight.
https://developers.google.com/maps/documentation/javascript/heatmaplayer
Please someone help me to build heatmap with that signal strengths. how ever i can draw map without weight. it is like this
my code is
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function initMap() {
var mapLayer = document.getElementById("map");
var centerCoordinates = new google.maps.LatLng(37.450143, -92.778961);
var defaultOptions = {center: centerCoordinates, zoom: 14};
map = new google.maps.Map(mapLayer, defaultOptions);
show_heatmap();
}
function show_heatmap(){
var heatMapData = [
{location: new google.maps.LatLng(37.782, -122.447), weight: 0.5},
{location: new google.maps.LatLng(37.782, -122.443), weight: 2},
}];
var sanFrancisco = new google.maps.LatLng(39.4861217, -76.1590323);
map = new google.maps.Map(document.getElementById('map'), {
center: sanFrancisco,
zoom: 13,
mapTypeId: 'satellite'
});
var heatmap = new google.maps.visualization.HeatmapLayer({
data: heatMapData
});
heatmap.setMap(map);
</script>
</head>
<body>
<div>
<div class="row mt-3">
<div class="form-group col-md-12">
<div id="map" style="height: 500px;width: 100%;">
</div>
<div id="infowindow-content">
<img src="" width="16" height="16" id="place-icon" />
<span id="place-name" class="title"></span><br />
<span id="place-address"></span>
</div>
</div>
</div>
</div>
</body>
</html>
Related
Hi I've been trying to create a google map with search functionality. For some reason the search box works however the search functionality implement onto my map, I'm unsure why.
I basically want the search box outside the map to update the map, with location set.
function init(){
var maxZoom = 3;
var locationZoom = 5;
var markers = [];
var mapOptions = {
zoom: maxZoom,
minZoom: maxZoom,
center: new google.maps.LatLng(31.631095, -7.954125),
};
var mapElement = document.getElementById('google-map');
var map = new google.maps.Map(mapElement, mapOptions);
new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')), {
types: ['geocode']
});
}
init();
My Html
<div class="row google-search">
<div class="col-sm-12">
<input id="autocomplete" class="form-control" type="text" placeholder="Search Box">
</div>
</div>
<div id="google-map"></div>
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
I have a component called foo
I have foo.html in apps/foo/components/content/foo/foo.html
currently this file contains the following.
<div data-sly-use.ev="Foo"
class="${ev.cssClass || ''}"
title="${ev.title || ''}"
data-emptytext="Foo Asset">
${ev.html # context='unsafe'}</div>
I have Foo.java in apps/foo/components/content/foo/Foo.java
that has getCssClass(), getTitle(), getHtml() needed by foo.html.
The above works fine
Question
When the user adds this component to the page, I want it to include a google map in the page. The lat/long to the google map will be provided by Foo.java#getLat() and Foo.java#getLong()
How can I do this?
I have the google map working in an HTML outside of AEM and the code is pretty simple:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
the lat/long values for myLatlng variable in the above javascript will need to come from Foo.java.
If you want to pass parameters to a script you can do as they generally do in Coral UI via data-xxx attributes in the Sightly script.
Set the property from your Foo into a data attribute in some DIV you will later fetch in JS.
Get the div in JS via its ID and obtain the data attributes you are interested in.
Example:
Sightly
<div id="map_canvas" data-lat="${ev.lat}" data-long="${ev.long}">
</div>
Javascript
this.mapCanvas = document.getElementsByClassName("map_canvas")[0];
var lat = $mapCanvas.data("lat");
var long = $mapCanvas.data("long");
var myLatlng = new google.maps.LatLng(lat,long);
I hope this helps! :)
I hide the map-element initially using ng-if. When the ng-if evaluates to true I cannot add markers to the map. The map-element is contained in a html partial - it is not part of the initial html-page.
HTML:
<div ng-controller="MapCtrl">
<div style="width:100%;height:300px" ng-if="whatever">
<div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
ui-event="{'map-click': 'openMarkerInfo(marker)'}">
</div>
<div id="map_canvas" ui-map="myMap" class="map"
ui-event="{'map-click': 'addMarker($event, $params)', 'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
ui-options="mapOptions">
</div>
</div>
<div style="width:100%;height:300px;background:yellow" ng-click="showMap()">
</div>
</div>
JS:
angular.module('doc.ui-map', ['ui.map','ngRoute'])
.controller('MapCtrl', ['$scope','$timeout', function ($scope,$timeout) {
$scope.myMarkers = [];
$scope.mapOptions = {
center: new google.maps.LatLng(35.784, -78.670),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.addMarker = function ($event, $params) {
console.log('addMarker');
$scope.myMarkers.push(new google.maps.Marker({
map: $scope.myMap,
position: $params[0].latLng
}));
};
$scope.setZoomMessage = function (zoom) {
$scope.zoomMessage = 'You just zoomed to ' + zoom + '!';
console.log(zoom, 'zoomed');
};
$scope.openMarkerInfo = function (marker) {
$scope.currentMarker = marker;
$scope.currentMarkerLat = marker.getPosition().lat();
$scope.currentMarkerLng = marker.getPosition().lng();
$scope.myInfoWindow.open($scope.myMap, marker);
};
$scope.showMap = function(){
$scope.whatever = true;
}
$scope.setMarkerPosition = function (marker, lat, lng) {
marker.setPosition(new google.maps.LatLng(lat, lng));
};
}]) ;
The 'ng-if' directive will create or remove a portion of DOM based on expression. The ng-if expression is equal to false when you launch the map app.
So the map-ui element does't append to DOM tree and the 'myMap' property won't be added to the controller scope. This will make addMarker() broken because $scope.myMap === undefined
You could try to add the following code to your addMarker function and it should show undefined on your console:
console.log($scope.myMap);
Although ng-show caused the wrong map width/height problem, you could enforce map refresh by dispatching "resize" event when initialize the map.
You need to trigger a event "resize" on Google map object when you want to refresh the map.
google.maps.event.trigger(map,"resize");
My Example:
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Angular UI Map</title>
</head>
<body>
<div id="map" ng-controller="mapCtrl">
<input type="button" ng-click="showMap()"/>
<div ng-show="isShow">
<div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" ui-event="{'map-click':'addMarker($event, $params)'}" ui-options="mapOptions">
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
<script src="js/angular-ui-utils/modules/event/event.js"></script>
<script src="js/angular-ui-map/src/map.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=onGoogleReady"></script>
<script src="js/angularUIMap.js"></script>
<script>
function onGoogleReady(){
angular.bootstrap(document.getElementById("map"),['mapApp']);
}
</script>
</body>
</html>
angularUIMap.js
angular.module("mapApp",['ui.map'])
.controller("mapCtrl",function($scope,$timeout){
var mapInitFlag = false;
$scope.showMap = function(){
$scope.isShow = !$scope.isShow;
if(!mapInitFlag)
{
$timeout(function(){
google.maps.event.trigger($scope.myMap,'resize');
mapInitFlag=true;
console.log('adjust map');
});
}
};
$scope.myMarkers = [];
$scope.mapOptions = {
center: new google.maps.LatLng(35.784, -78.670),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
$scope.addMarker = function ($event, $params){
$scope.myMarkers.push(new google.maps.Marker({
map: $scope.myMap,
position: $params[0].latLng
}));
};
});
Screenshot:
Hope this helpful.
i'm working on an app which i need the select areas by a rectangle and put it SouthWest and NorthEast in inputs in order to store them in my database this is my code
please I need help ...
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
width: 500px;
height: 500px;
left;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
//var bounds;
function updateRectanglePosition(rectangle) {
var point1 = this.getBounds().getNorthEast();
var point2 = this.getBounds().getSouthWest();
document.getElementById('lat1').value = point1.Lat();
document.getElementById('lng1').value = point1.Lng();
document.getElementById('lat2').value = point2.Lat();
document.getElementById('lng2').value = point2.Lng();
}
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(44.490, -78.649),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var Bounds = new google.maps.LatLngBounds(
new google.maps.LatLng(44.490, -78.649),
new google.maps.LatLng(44.599, -78.443)
);
var rectangle = new google.maps.Rectangle({
bounds: Bounds,
draggable: true,
editable: true,
map : map,
});
rectangle.setMap(map);
updateRectanglePosition(rectangle);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="aa">
<form action="" method="post">
<p>
<label>longitude1</label>
<input type="text" id="lng1" name="lng1"/>
<label>latitude1</label>
<input type="text" id="lat1" name="lat1"/>
</p>
<p>
<label>longitude2</label>
<input type="number" id="lng2" name="lng2"/>
<label>latitude2</label>
<input type="number" id="lat2" name="lat2"/>
</p>
<p>
<input type="submit" name="ajouter" id="ajouter" value="ajouter"/>
</p>
</form>
</div>
<b id="output"></b>
</body>
</html>
please help... i really need it to get a good mark in my training
If I run your code, even IE gives me this error:
Message: Object doesn't support property or method 'getBounds'
Line: 22
Char: 5
Code: 0
On the first line of this function:
function updateRectanglePosition(rectangle) {
var point1 = this.getBounds().getNorthEast();
var point2 = this.getBounds().getSouthWest();
document.getElementById('lat1').value = point1.Lat();
document.getElementById('lng1').value = point1.Lng();
document.getElementById('lat2').value = point2.Lat();
document.getElementById('lng2').value = point2.Lng();
}
Once I fix that (by changing "this" to "rectangle") I get an error on this line:
document.getElementById('lat1').value = point1.Lat();
As a google.maps.LatLng object doesn't have a Lat() method (or a Lng() method). Javascript is case sensitive and the documented method is lat() (and lng()).
The functions Lat() and Lng() should be without capitals and also this should be rectangle:
function updateRectanglePosition(rectangle) {
var point1 = rectangle.getBounds().getNorthEast();
var point2 = rectangle.getBounds().getSouthWest();
document.getElementById('lat1').value = point1.lat();
document.getElementById('lng1').value = point1.lng();
document.getElementById('lat2').value = point2.lat();
document.getElementById('lng2').value = point2.lng();
}
That should work.
I'm trying to open up more than one dojox.layout.FloatingPane with different instances of a Google Map using the V3 API. I can always get the first FloatingPane to display correctly with the map, but after the first one I can't add more. I thought maybe I couldn't add more than one google map to the page, but I tried that and it worked. I discovered that no matter how I put the first map on the page (weather via a direct div on the page or on a FloatingPane), I couldn't get a Floating Pane to show another map.
At the bottom is a sample page that exhibits this behavior. The buttons on top are for a map with a Floating Pane -- if you click either one first you will see that map. After you open the FloatingPane with a map you can click on the initialize button and the other maps will load properly on the divs on the page, but not another FloatingPane with a map. If you click the initialize button first then you can't see any of the maps on the FloatingPane.
I would like to be able to show multiple FloatingPanes with different Map instances on the same page if possible.
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dijit/themes/tundra/tundra.css">
<style type="text/css">
body, html { font-family:helvetica,arial,sans-serif; font-size:90%; }
.gMapDiv {
width: 100%; height: 100%;
}
.gMapContainerDiv {
/*width: 480px; height: 300px;*/
width: 100%; height: 100%;
}
</style>
<style type="text/css">
#import url("http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/layout/resources/FloatingPane.css");
#import url("http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojox/layout/resources/ResizeHandle.css");
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
djConfig="parseOnLoad: true, isDebug: true">
</script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
for (var i=0 ; i<2 ; i++) {
var latlng = new google.maps.LatLng(19.422834*(i+1), -99.091452);
var mapDiv = document.createElement('div');
mapDiv.className = "gMapDiv";
document.getElementById("mapContainer" + (i+1)).appendChild(mapDiv);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(mapDiv, myOptions);
}
}
dojo.require("dijit.form.Button");
dojo.require("dojox.layout.FloatingPane");
//dojo.addOnLoad(initialize);
//dojo.addOnLoad(function(){dojo.parser.parse();});
// adapted from code at: http:((lgrammel.blogspot.com/2009/05/google-map-in-dojo-floatingpane.html
function createMapPane(nhId,mapDiv,title, x, y, width, height) {
mapFloatingPane = new dojox.layout.FloatingPane({
title: title,
resizable: true,
dockable: false,
style: "position:absolute;top:"+y+";left:"+x+";width:"+width+"px;height:"+height+"px;visibility:hidden;",
content: mapDiv,
id: "mapFloatingPane" + nhId
});
// quick fix for positioning, does not seem necessary in source code
// example (FloatingPane test), but was necessary with dojo bin and
// Firefox 3.0.1 (for me issue still exists in 3.5.5)
mapFloatingPane.domNode.style.left = x + "px";
mapFloatingPane.domNode.style.top = y + "px";
mapFloatingPane.resize({ 'w': width, 'h': height });
//dojo.body().appendChild(mapFloatingPane.domNode);
dojo.byId("mapPanesDiv").appendChild(mapFloatingPane.domNode);
mapFloatingPane.startup();
return mapFloatingPane;
}
function showGMapOnFloatingPane(lat,lng,title,x,y,nhid) {
var myLatLng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mcDiv = document.createElement('div');
mcDiv.className = "gMapContainerDiv";
var mapDiv = document.createElement('div');
mapDiv.className = "gMapDiv";
mcDiv.appendChild(mapDiv);
var map = new google.maps.Map(mapDiv,myOptions);
var mapFloatingPane = createMapPane(nhid,mcDiv,title,100,50,484,326);
mapFloatingPane.show();
}
</script>
</head>
<body class="tundra ">
<div id="mapPanesDiv"></div>
<table width="100%">
<tr>
<td style="text-align:center;">
<button dojoType="dijit.form.Button" type="button" id="mapBtn1">
Rockefeller Center
<script type="dojo/method" event="onClick" args="evt">
showGMapOnFloatingPane(40.758229,-73.977749,"Rockefeller Center",20,100,1);
</script>
</button>
</td>
<td style="text-align:center;">
<button dojoType="dijit.form.Button" type="button" id="mapBtn2">
Las Vegas
<script type="dojo/method" event="onClick" args="evt">
showGMapOnFloatingPane(36.135657,-115.172424,"Las Vegas",250,100,2);
</script>
</button>
</td>
</tr>
<tr>
<td width="50%" style="text-align:left;"><div id="mapContainer1" style="width: 480px; height: 300px;border: 2px solid blue;"></div></td>
<td width="50%" style="text-align:right;"><div id="mapContainer2" style="width: 480px; height: 300px;border: 2px solid red;"></div></td>
</tr>
<tr>
<td>
<button dojoType="dijit.form.Button" type="button" id="initBtn">
Initialize the bordered maps in regular div (not in floating pane)
<script type="dojo/method" event="onClick" args="evt">
initialize();
</script>
</button>
</td>
</tr>
</table>
</body>
</html>
Thanks to seangarner on the #dojo IRC channel on irc.freenode.net I have an answer. I had to move the creation of the map object to after calling FloatingPane.show(). Here is the modified showGMapOnFloatingPane function:
function showGMapOnFloatingPane(lat,lng,title,x,y,nhid) {
var myLatLng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 12,
center: myLatLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mcDiv = document.createElement('div');
mcDiv.className = "gMapContainerDiv";
var mapDiv = document.createElement('div');
mapDiv.className = "gMapDiv";
mcDiv.appendChild(mapDiv);
var mapFloatingPane = createMapPane(nhid,mcDiv,title,100,50,484,326);
mapFloatingPane.show();
var map = new google.maps.Map(mapDiv,myOptions);
}