I've got a Google Map (v3) setup and instead of in-map Info Windows (limited to boundaries of the map) I would like to use a full-screen modal window that will take up all of the area within the browser window. This map is for a mobile application, so I need all the space I can get in the window that pops up.
If anyone has any knowledge on how to accomplish this, or could point me in the right direction, I would appreciate it. Thank you!
If it's a full screen modal, then it doesn't have to be attached to the map, so you can use this structure:
<div id="map-canvas"></div>
<div id="modal"></div>
<script>
var map = new google.maps.Map(document.getElementById('map-canvas'),{
//options
});
google.maps.event.addListener(map,'click',function(e) {
//do something with div id="modal"
});
</script>
Related
I have a leaflet map in a bootstrap div:
<div class="col-xs-10 col-xs-offset-1" id="kartencol">
<leaflet defaults="defaults" center="center" paths="meinePfade" bounds="bounds" decorations="decorations" width="100%" height="480px" markers="markers"></leaflet>
</div>
I use jquery and css animation to change the width of the col div and put a form next to it.
$('#kartencol').toggleClass('col-xs-10 col-xs-7')
$('#formcol').toggleClass('col-xs-0 col-xs-3')
It works great, but when I do something with the map now like setting bounds, angular does this with the old map width.
How do I do a redraw or anything else with the map, to let angular know about the new width?
Best
Joerg
You can do this by calling the invalidateSize function of your L.Map instance. When using the angular-leaflet-directive you can get an instance of your map by using leafletData.getMap function in your controller:
leafletData.getMap().then(function(map) {
map.invalidateSize();
});
Here's the reference on invalidateSize: http://leafletjs.com/reference.html#map-invalidatesize
Checks if the map container size changed and updates the map if so — call it after you've changed the map size dynamically
I checked that there are checkresize() methods from google Map's native API.. but it doesn't seem to work with the refresh function from gmaps.js.
Does anyone has similar problems using AngularJS and gMaps.js? How do you come to solve it?
After i resize the window, the map appears again. So I am thinking is there anyway to check resize on initialization for gMap.js?
ng-cloak did not work for me when I tried it. I think this was because I am using the map in a panel which expands on user interaction instead of being visible on load.
I switched my ng-show to an ng-if and it worked correctly. This is because the map code(I used a directive) will not run until the if condition is true, which allows it to render properly.
*Sorry the fiddle got deleted. I don't remember what I had in it, but it was something like this
<gmap unique="231" center="{{getAddress(item)}}" destination="{{getAddress(item)}}" origin="{{getMyAddress(item)}}" type="roadmap" marker-content="Hello"></gmap>
The important thing is that the google scripts don't start doing their thing until your container element is actually displayed. This is accomplished with the ng-if.
Add the ng-cloak property on your map element or on your directive element.
"The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser"
http://docs.angularjs.org/api/ng.directive:ngCloak
map rendered successfully without resize.
Why resize gives you proper map ?
Because browser paints the view again.
How to fix it?
To get a proper layout of the map in any panel which is triggered lately, map has to be painted after the panel is loaded.This can be achieved by (setTimeout) code as mentioned below.
code objective is to trigger map resize event after 60 milli seconds.
setTimeout(function () {
uiGmapIsReady.promise().then(function (maps) {
google.maps.event.trigger(maps[0].map, 'resize');
lat = -37;
lon = 144;
maps[0].map.panTo(new google.maps.LatLng(lat,lon));
var marker = {
id: Date.now(),
coords: {
latitude: lat,
longitude: lon
}
};
$scope.map.markers = [];
$scope.map.markers.push(marker);
console.log($scope.map.markers);
});
}, 60);
Try to resize the map using this code in the controller:
NgMap.getMap().then(function(map){
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
});
});
I will be using shopify's system so i am restricted to how and which pages i can edit.
I have one page that is an app but i want that page, on loading, to show a popup disclaimer before they can see the page.
I am told that i can't edit the app page itself but i can add javascript code in the common site footer to check current url and if it equals this certain page, then create a popup.
I have created a page that holds the disclaimer information so i would like the popup window to load this pages' content.
I believe i can load the content using this div tag
div id="popupinfo" pages.disclaimer.content div
I do not know how to add the if statement to check if current url = site.com app.html then div id="popupinfo" pages.disclamier.content div
This site uses their own language called Liquid, hence the double brackets..but any code to pull the content of an html page would work i am sure.
Can i please have some assistance in how i am to
check current page
if page = xxx
best way to create a popup window where the user has to click as yes or ok button
then display the regular page
Thanks in advance!
Brocour
It's only possible to open a pop-up window upon a user-action, for example a 'click' action.
if( document.URL === "myPage.html" ){
// Disclaimer alert
if (confirm('Do you agree to this Disclaimer?')){
// Redirect
window.location = "myNewPage.html";
} else {
// Do nothing
}
}
Try something like this:
<html>
<head>
</head>
<script type="text/javascript">
function poponload()
{
popupwindow=window.open("","mywindow","location=1,status=1,scrollbars=1,width=100,height=100");
popupwindow.moveTo(0, 0);
}
</script>
<body onload="javascript: poponload()">
This is the page
</body>
</html>
You could use the code in this example i made.
$(document).ready(function(){
$('#open_popup').click(function(){
popupwindow=window.open("http://google.com","mywindow","location=1,status=1,scrollbars=1,width=600,height=500");
})
})
I have been searching for an uncomplicated solution to how an image (png) can be zoomed in and out without affecting the rest of the website, but found none.
Have any of you used such a tool or know a way to do this using jQuery or javascript? I am very new to jQuery, so don't know what events I should look at. This functionality should work on both android tablets and iPad.
Looked at JQuery Mobile Pinch Zoom Image Only and the links provided but apparently those are for the ones using PhoneGap.
Thanks for any help.
I did not find a solution either so I implemented it myself (using vanilla JS and canvas but portable to css3) : https://github.com/rombdn/img-touch-canvas
Example : http://www.rombdn.com/img-touch-canvas/demo (better with a touch device but works on desktop with +/- and mouse drag)
<html>
<body>
<div style="width: your_image_width; height: your_image_height">
<canvas id="mycanvas" style="width: 100%; height: 100%"></canvas>
</div>
<script src="img-touch-canvas.js"></script>
<script>
var gesturableImg = new ImgTouchCanvas({
canvas: document.getElementById('mycanvas'),
path: "your image url"
});
</script>
</body>
</html>
I would place the image in a "viewport" layer that is used to maintain the flow of your page. The "viewport" element would have it's overflow CSS property set to hidden to achieve this goal.
You can then use JavaScript to detect multiple touches and then scale the image as necessary. I have yet to use this frameworks but it seems very cool and could help make this easier on you: https://github.com/HotStudio/touchy
You can also detect multiple touches without a framework by watching the event.touches array inside an event handler for touchmove. For each touch occurring simultaneously there will be another index in the event.touches array.
Using Touchy seems pretty easy (untested):
var handleTouchyPinch = function (e, $target, data) {
$target.css({'webkitTransform':'scale(' + data.scale + ',' + data.scale + ')'});
};
$('#my_div').bind('touchy-pinch', handleTouchyPinch);
i have the following code:
var point0 = new GLatLng(40.786729,-73.972766);
var marker0 = new GMarker(point0);
marker0.value = 0;
GEvent.addListener(marker0, "click", function() {
var myHtml = "<b><a href='http://Photos.Net'><br />01-0001</a></b><br /><br /><img src=http://adam.kantro.net/pics/Apartment/Thumbnails/Apartment-pic001.jpg><br/><br/><br/>";
map.openInfoWindowHtml(point0, myHtml);
});
the issue is that the image shows up outside the bounds of the popup window. Is there anyway to force the popup window to expand to fit this picture and the full html.
This is a pretty common problem with Google maps info windows.
Set the height explicitly on the image tag:
<img height="112" src=http://.../Apartment-pic001.jpg>
Check inherited styles being applied to the info window contents after it has been attached to the map.
Check out the following question:
How to set Google map's marker's infowindow max height?
Have you tried something like
map.openInfoWindowHtml('<div style="width: 20em">...</div>');
I don't believe it can auto size so you have to be cute and specify the width beforehand
also see here