Before anyone jumps on me for an answer to my question that already exists, please read the rest of my question and tell me how to handle this.
There is already a question asked (Making the Bing Map API Map responsive) that contains what is marked as an answer except the answer doesn't work.
The problem? In addition to some other issues (Google vs. Bing, a full listing of the javascript implementation, etc.) the answer includes a variable called listingsW that does not exist anywhere in the answer or the question.
Does anyone have a working example (complete) for either Bing or Google?
Thanks in advance!
$(window).resize(function () {
var screenH = $(document).height();
var screenW = $(document).width();
$('#map-canvas').css({
width: screenW - listingsW,
})
google.maps.event.trigger(map, 'resize');
});
listinsW is the width of some other control on their page. If you had a side panel, that may contain a list of items beside the map you would subtract this the width of that panel from the screen width to get the width of the map. If you have a full screen map then remove this property. All that said you could just simply have the map fill the available space by setting the css propertyies; position:relative;width:100%;height:100%. You will also need to add the following to your CSS styles:
html,body{
margin:0;
padding:0;
width:100%;
height:100%;
}
By using CSS you don't need to worry about using events when the window resizes.
Related
Firstly, thanks to whoever developed and help maintain svg-pan-zoom. It's been really helpful. Big props :)
Anyway, I have a quick question to the svg-pan-zoom community. Is it at all possible to use svg-pan-zoom on a svg that has a HTML div inside of it (which will be inside a foreignObject)?
I need a HTML element (a form specifically) to 'follow' the movements of this svg when it's being panned and zoomed around. Its position relative to the svg elements shouldn't change, it has to move with them.
I have tried doing it completely separately (separate code to control the panning of the HTML form) but it's very gimmicky and I ran into some technical issues I'd rather not deal with. (For example, moving the div doesn't move the svg with it.) I'd really appreciate it if someone could tell me if svg-pan-zoom supports foreignObjects, and what to do to move HTML elements with the svg.
Thanks in advance.
To follow up, I ended up just disabling the default zoom and pan options, and then wrote a function to pan both the svg and the form element so they'd move together.
(Some of this code was inspired by another Stack Exchange answer that I looked up briefly and can no longer find. I'd reference it later if I remember.)
Like most solutions, solving the problem this way brought up more issues. For instance, the form moves around perfectly with the mouse, but for some reason the function panBy(xpixel, ypixel) pans by way too much (a tiny mouse movement throws it out of the page.)
I guess this is my solution, though it has that issue. I'd been stuck on this so long and would appreciate it a ton of someone can help me figure out why panBy is acting weird.
// Pan when mouse is dragged
$(window).on('mousedown', function(event){
var initClick = {
x : event.pageX,
y : event.pageY
};
var initPosition = $('#form1').offset();
var handlers = {
mousemove : function(event){
panZoom.panBy({x: event.pageX - initClick.x, y: event.pageY - initClick.y});
$('#form1').css({"top": initPosition.top + (event.pageY - initClick.y),
"left": initPosition.left + (event.pageX - initClick.x)});
},
mouseup : function(event){
$(this).off(handlers);
}
};
$(document).on(handlers);
});
I have an html page that is displayed on a television screen sort of like digital signage. Because of this, everything that is on the page has to be displayed without any user input. I have some records stored in a mySQL database that are displayed in a list format and what I would like to do is when the list gets to big to be displayed, it scrolls up (maybe one line at a time) similar to how a scrolling marquee works.
My ideas on how to do this are fragmented at best, I was hoping someone could point me in the right direction.
btw, I know using the marquee tag is "evil" to a lot of developers, however in this case because there is no user input, I don't see any other way.
Edit: What I had in mind was to somehow get the div height and then use an if statement to trigger a marquee when the height exceeds a predetermined size.
Edit: Here is what I've got so far, using JavaScript to figure out the div height...
<script type="text/javascript">
function divHeight()
{
var height = document.getElementById("list").offsetHeight;
if (height > 500)
{
activate marquee effect.
return;
}
else
{
don't activate marquee effect.
return;
}
}
</script>
Then...
<body onLoad="divHeight()">
<div id="list">
my list goes here
</div>
</body>
Look at this page
http://www.webdesignbooth.com/create-a-vertical-scrolling-news-ticker-with-jquery-and-jcarousel-lite/
They did it using jcarousel lite. I would have written an example by myself but I found this good example first saving me from do it ;)
Ok, I figured out a nice way to do this with very little coding. It uses JavaScript to alter the div contents if the size is exceeded. I've got the text that I want to scroll inside div id="scroll" and that div is populated with my data from the mySQL database using php. Here is the script:
<script type="text/javascript">
var div = document.getElementById("scroll");
var height = div.offsetHeight;
var content = div.innerHTML;
if (height > 500)
{
div.innerHTML = "<marquee direction=\"up\" scrollamount=\"2\" height=\"500px\" onfinish=\"redirect()\" loop=\"1\">" + content + "</marquee>";
}
function redirect()
{
refresh=window.setTimeout(function(){location.href=""},0);
}
</script>
Since this application is for digital signage, I have it redirect once the full marquee content has been displayed, that's why I have onfinish="redirect" and then a function to redirect.
Hopefully this will help someone out, I know I spent a lot of time scratching my head over it.
Does anyone know how to get the current style being used by the map zoom control?
e.g. google.maps.ZoomControlStyle.SMALL, or google.maps.ZoomControlStyle.LARGE
You can specifiy the start style in mapOptions but the map changes the style to small if the web browser is resized too small, or the map is being viewed on a touch device.
I show custom labels next to the zoom control on www.topomap.co.nz and would like to hide the labels if the control style becomes SMALL.
The zoom control changes automatically at the following sizes, perhaps you could attach an event listener to the onsize method, and monitor the size of you canvas and adapt once the resolution has changed. https://developers.google.com/maps/documentation/javascript/controls
The sizes are:
Greater than 400x350px = large zoom
Less than 400x350px = small zoom (the control adjusts if either extent is less than this amount)
A bit of a hack that is likely to need revising in future Google Maps API releases as the graphics get tweaked by Google:
function isFullGoogleZoomControl() {
return $("#map .gmnoprint img[src$='mapcontrols3d7.png']").length > 0;
}
Note: Requires jQuery for the selector.
Update to include support for IE10 with touch screen:
function isFullGoogleZoomControl() {
return $("#map .gmnoprint img[src$='mapcontrols3d7.png']").length > 1;
}
My page didn't require a horizontal scroll bar initially, but now one appears mysteriously that is beyond any of the elements that are covered on inspect on Chrome and firebug. No elements pass that blue line so I'm not sure how to fix this.
I know I can hide the scrollbar with overflow-y:hidden, but that's not the point. It shouldn't be there at all.
EDIT Here's the jsfiddle: http://jsfiddle.net/S8RUp/
A bit messy, but I think it gets the point across.
The jsFiddle link has too many overflowing contents to be useful. What you can do to ease debugging is to use a bit of code like this to show you only elements that are over a threshold width:
// using jQuery - you can use other library or include it temporarily for debugging purposes
$('*').each(function() {
var w = parseInt($(this).width(), 10);
// you can put something larger than 700, depending on your situation
if (w > 700) {
console.log(w, this);
}
});
It will have a few false positives (the html node for example), but you'll probably find the culprit easily enough.
I've read docs about positioning controls on the map(TOP, TOP_LEFT, etc), but Is there any way to make custom position? For example: left: 20px; top: 200px;
I just want to have in top_left corner my logo and zoom control right under logo.
And how to remove pan control in navigation controls? I want to have only zoom control in default style(not minimized).
Thank you.
Although the question is rather old, with almost 3k views it still seems to draw interest - So, here is my solution:
Wrap the controls!
First we have to find the container-element, where Google puts the control. This depends on which controls we want to use on the map. Google doesn't use unique ids for those containers. But all the controls have the class "gmnoprint" in common. So just counting the elements with "gmnoprint" does the job. Say we only want to use the "ZoomControlStyle.SMALL"-control. It's always the last element with "gmnoprint".
Now, we can simply style the element - Right? No. As soon as you zoom or resize the map, Google resets the styling of the controls. Bad luck, but: We can wrap a container around the controls and style this container!
Using jQuery, this is a really simple task:
$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
We only have to make sure, the control is fully loaded by the time we try to wrap it. It's not totally bulletproof I guess, but using the MapsEventListener "tilesloaded" does a pretty good job:
google.maps.event.addDomListener(map, 'tilesloaded', function(){
// We only want to wrap once!
if($('#newPos').length==0){
$('div.gmnoprint').last().parent().wrap('<div id="newPos" />');
}
});
Check out http://jsfiddle.net/jfPZH/ (not working, see Update Feb 2016)
Of course if you don't like the initial flicker and want a more reliable version you can do all kinds of improvements like fadeIn etc: http://jsfiddle.net/vVLWg/ (not working, see Update Feb 2016)
So, I hope some of you will find this useful - Have fun!
Update: With this method you can position any other control (e.g. the controls of the Drawing Library) as well. You just have to make sure to select the right container! This is a modified example: http://jsfiddle.net/jP65p/1/ (somehow still working)
Update: As of Feb 2016 Google seems to have changed the positioning of the map controls. This does not break my solution. It just needs some adjustment. So here are the updated fiddles:
Simple: http://jsfiddle.net/hbnrqqoz/
Fancy: http://jsfiddle.net/2Luk68w5/
It is extremely simple, just add this to your css file!
div.gmnoprint { padding-top: 50px; }
It will move the control 50px down with no hacks or anything!
You can create a custom control for your logo, and add it to the map to position it. You can't set the location of the control directly beyond the constants, but you can offset the location using padding on your control div.
http://code.google.com/apis/maps/documentation/javascript/controls.html
set
panControl : false,
in the ZoomControlsOptions which you set