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);
}
Related
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 am following a tutorial that can locate a friend (their mobile) and pinpoint them on a Google map. All was going well including getting my coordinates and printing them to screen and putting them inside my <div id="location"></div> but now I am trying to take those coords and mark them on a map but I cant get the map to show. I'm sure my functions are set up wrong somehow but I can't work it out. Any clues?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/jquery.ui.map.js"></script>
<script>
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(useposition);
});
</script>
<script>
function useposition(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
$("#location").html('Lat: ' + lat + '<br />Lon: ' + lon);
};
function deviceposition(position){
$("#map").gmap({'center': deviceposition, 'zoom': 12, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(ev, map) { themap = map;});
$('#map').gmap('addMarker', { 'id': 'client', 'position': deviceposition, 'bounds': true
});
}
</script>
</head>
<body>
<div id="location"></div>
<div id="map" style="width:400px; height:400px"></div>
<!-- This is supposed to be filled with the Google Map coords -->
</body>
</html>
I have tried passing div in CreateElement() method and then assigning the values to a variable mapcanvas. This whole declaration is inside a method which is called in this particular line:
navigator.geolocation.getCurrentPosition(success);
I am sharing the whole code..
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
Hope this would help!!!
I have made some code to plot basic markers on a google map selectable via a dropdown.
however : I'd like to have two drop downs with the same options in them, and only display the markers selected in the dropdown (i.e. have 100+ markers but only show 2). Id also like to 'draw a line' in-between the two points and have a pop up window (as per google maps does) when hovering over the location. Lastly, can the window resize to the markers?
Here's what I've got so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Here you can specify all list of your geolocation options
window.markers = {
'Moscow': {lat: 55.74257, lng: 37.61547},
'Saint Petersburg': {lat: 59.93952, lng: 30.31202}
};
// This is a initialization of map and set of all markers
function initialize() {
var latlng = new google.maps.LatLng(window.markers['Moscow'].lat, window.markers['Moscow'].lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(i in window.markers){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(window.markers[i].lat, window.markers[i].lng),
map: map
});
}
}
// This is a handler for dropdown change
function mychange(element){
var city = new google.maps.LatLng(window.markers[element.value].lat, window.markers[element.value].lng);
map.setCenter(city);
return false;
}
</script>
</head>
<body onload="initialize()">
// This is your dropdown
<select onchange='mychange(this)'>
<option value='Moscow'>Moscow
<option value='Saint Petersburg'>Saint Petersburg
</select>
// This DIV for you map
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I have published a Google Fusion table/map.
https://www.google.com/fusiontables/DataSource?docid=1bQud-ZGrJK9yBwfdasIcbU1rwJ5W9ZE53RBAeLk
My problem is that the info window does not apear when looking at the map inside html which has the map embedded. As you can see, the table is totally exposed for all users. Before I noticed this problem I had the table shared as "Everyone with the link" and thought that was the issue but no help in changing it to public.
My html with embedded map:
<html>
<head>
<style type="text/css">
#map_canvas {
height: 700px;
width: 380px;
background: #000000;
float:left;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var layer;
var map;
var html;
function initialize() {
var latlng = new google.maps.LatLng(62.835089,17.556641);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Add län
var lanLayer = new google.maps.FusionTablesLayer(667529);
lanLayer.setMap(map);
}
function clearOverlays() {
if (layer != null) {
layer.setMap(null);
layer = null;
}
}
function setMapLayer(fusionTableId) {
if (layer != null) {
layer.setMap(null);
layer = null;
}
layer = new google.maps.FusionTablesLayer(fusionTableId);
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()" class="map">
<div id="map_canvas"></div>
<div class="LayerManager">
<form>
<input type="radio" onclick="setMapLayer(3357208)">Antal skuldsatta<br />
<input type="radio" onclick="clearOverlays()" checked="true" >Bara länsgränser<br />
</form>
</div>
</body>
</html>
For the layer that is loaded at init the info window shoes up fine but not the layer that is loaded when radio button is clikced. Why?
Use a proper FusionTablesLayerOptions-object as argument for google.maps.FusionTablesLayer
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Geocodable address',
from: fusionTableId
}
});
I am using a google maps custom control. I would like a text link outside of the map (on another place on the page) to interact with the control. Basically I want to be able to trigger a click on the custom control.
Does anyone have advice or assistance on how this can be accomplished?
This also relates to Using custom control with Google Maps KeyDragZoom - how to activate drag zoom? , decided to make a question more general.
Try directly selecting it by source:
$('img[src=http://maps.gstatic.com/mapfiles/ftr/controls/dragzoom_btn.png]').click();
If you are trying to make KeyDragZoom turn on/off when you click on a link outside the map, you can set the onclick event on the link to run a function like this:
function toggleClickZoom() {
var myKeyDragZoom = map.getDragZoomObject();
myKeyDragZoom.buttonDiv_.onclick(document.createEvent('MouseEvent'));
}
I've managed to create custom zoom in and zoom out buttons outside the map:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 60%; width:60%; margin:20px auto; border:1px solid; padding-left:100px; }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=ADD-YOUR-API-KEY-HERE&sensor=false®ion=AU">
</script>
<script type="text/javascript">
function HomeControl(controlDiv, map) {
google.maps.event.addDomListener(zoomout, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 0){
map.setZoom(currentZoomLevel - 1);}
});
google.maps.event.addDomListener(zoomin, 'click', function() {
var currentZoomLevel = map.getZoom();
if(currentZoomLevel != 21){
map.setZoom(currentZoomLevel + 1);}
});
}
var map;
/**
* The HomeControl adds a control to the map that simply
* returns the user to Chicago. This constructor takes
* the control DIV as an argument.
* #constructor
*/
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(-33.90224, 151.20215),
panControl: false,
zoomControl: false,
streetViewControl: false,
overviewMapControl: false,
mapTypeControl: false,
mapTypeControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, mapOptions);
// Create the DIV to hold the control and
// call the HomeControl() constructor passing
// in this DIV.
var homeControlDiv = document.createElement('div');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.TOP_LEFT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<div id="zoomout" style="border:1px solid; width:150px; heoght:50px; cursor:pointer; margin-bottom:20px;">ZOOM ME OUT</div>
<div id="zoomin" style="border:1px solid; width:150px; heoght:50px;cursor:pointer;">ZOOM ME IN</div>
</body>
</html>
The accepted answer assumes that the zoom control is on the map. If visualEnabled is false, the dragzoom_btn image will not exist, nor will buttonDiv_.
Until external controls are officially supported, this hack seems to work:
function onZoomClick() {
var myKeyDragZoom = map.getDragZoomObject();
myKeyDragZoom.hotKeyDown_ = !myKeyDragZoom.hotKeyDown_;
}
When clicked, the zoom mode is turned on. When clicked again or the rectangle is drawn, zoom mode is automatically turned off.