I'm using a googlemap API.
And it always worked fine.
But now I am scaling the page in the website with the googleapi.
And it doesn't show the info near the marker anymore.
When I remove the scaling, it works like before.
Somebody who can help me?
The link to the script:
In the scaling, the mouse events doesn't work.
So I had to remove the 'click' function.
And now it shows the info again.
Another option could be to make a standalone webpage.
Related
I am using the ElevateZoom plugin in my web app. But the default behavior of the plugin is that the zoom section is shown only when the mouse hovers around the particular area.
What I am trying to achieve is, show the zoomed version of the image in a different DIV and will keep on showing the zoomed pic even after the mouse is removed from the pic.
Is ElevateZoom plugin able to do so by default , or has someone already achieved this functionality with the plugin.If so, any pointers or help is really appreciated.
The elevateZoom plugin can’t do this out of the box.
If you look at the plugin code (jquery.elevatezoom.js) you can see the mouseleave function on line #450 and if you are ok with editing the plugin code you can just replace self.setElements("hide") with self.setElements(""). But I don’t think this will give the desired result.
You can either find another plugin or hack your way through this one. For the latter it's good to know that you can access the elevateZoom object this way:
var $image = $('#your-image').elevateZoom({...});
console.log( $image.data('elevateZoom') );
So basically, I made a simple website.
I am using bootstrap along with masonry jquery and google maps.
This is the basic page of my website.
How this website works is like when gallery is click, index page will fadeout and gallery page is faded in.
Lets go straight to the point which is my CSS. I am wondering what is wrong with it since I am encountering this problem.
My masonry images for gallery will overlap each other but if I place things out of the division class section. Everything is fine. Same goes for the google map width problem.
Things will only be ok after the window is resized manually.
Here are the SS for the problems
my entire css link
http://pastebin.com/kqWaszqF
my custom js link
http://pastebin.com/uqSvaMeT
my index page link
http://pastebin.com/eKHyJV95
As you can see, if I place all this codes for gallery and map outside of everything will be working fine and great but if I put it inside of that . This the above problem happens.
I tried everything like min-width: 100%, width: 100% or whatsoever. Seems like this problem always exist. Even if I setTimeOut to my javascript for masonry and googlemap, it works sometimes but not perfect as it also fails.
Can some kind soul please help me out here?
You need to provide a fiddle with html so i can test it in order to help you.
Me and the team have been a bit stumped on this so I'm hoping someone has come across this problem before.
I have a notification div that flies in depending on some event calls. The script I have seems to be working everywhere except one application where the images won't load. Both the icon css background image and the actual loading indicator won't show if the container is dynamically appended.
If i remove the initial display:none property the images load, but once the trigger is called they don't.
Unfortunately the application is on an internal network and I can't share a link, but I've included a screen shot and a jsfiddle to the code I'm using. (which in it's self is doing exactly what it's supposed to)
http://jsfiddle.net/FSshV/7/
It's a heavy js based app with some ASP.NET 2.0 here and there and some ajax calls bouncing around but doesn't seem to be giving any errors and i haven't been able to pinpoint the problem.
I know it's a long shot and not much to go on but maybe someone hit that wall before :)
I'm curious if anyone has seen a similar problem before and can share some insight?
PS: yes I've checked if the image paths are correct, and they are ^.^
I'm trying to use Leaflet.js to display a map inside a tabbed panel from Twitter Bootstrap, but is behaving in a strange way:
When I click on the tab containing the panel there is a gray layer on top of the map. If I drag and move the map I get to see other tiles, but not the initial ones.
Even more strange is that if I resize the browser, suddenly it works perfectly, until I reload again, so I would guess is a problem with the css, but I cannot find the problem.
Also, placing the map outside of the tabbed panel works great.
I tested in Firefox and Chrome, and both have the same issue.
I created a test in jsfiddle to see it "live": http://jsfiddle.net/jasalguero/C7Rp8/1/
Any help is really appreciated!
It's a complete hack from messing with the leaflet.js source code, but it works (at least in jsFiddle) http://jsfiddle.net/C7Rp8/4/
The idea is from Google Maps, to "resize" or "redraw" the map when its container div is resized.
The changes I made are:
add id link3 to the small tab in HTML
tab3
add a listener to this tab inside $(function() {
$("body").on('shown','#link3', function() {
L.Util.requestAnimFrame(map.invalidateSize,map,!1,map._container);
});
The requestAniMFrame line is taken from trackResize in leaflet.js
Update from the comments: Hi, I used map.invalidateSize(false); instead of L.Util.requestAnimFrame(... and this also seems to work. Just thought I'd point this out. Great answer though! – Herr Grumps
Bootstrap 3 has custom namespaced events, and so previous answers would work with:
$("body").on("shown.bs.tab", "#link3", function() {
map.invalidateSize(false);
});
Reference: Bootstrap Tabs
I'm interested in adding a textbox (and button) to the Default navigation bar in Bing Maps v7.
My intent is to add a place-name geocoder to help the user quickly zoom to a specific area on the map. (This is a service provided by Bing Maps API, I just need help adding the box to the control.) I can, but don't have to, use jQuery.
The website http://pietschsoft.com/post/2010/12/18/Bing-Maps-Ajax-7-Add-Custom-Navigation-Bar-Buttons-using-jQuery.aspx actually has some really great sample code showing how to add a button to the bar, though I can't seem to get a textbox to work properly. My suspicion is that Bing Maps is hijacking all of my key-presses to use for panning, etc., but I'm not positive.
Has anybody had any luck in doing this?
Thanks!
I solved the problem by putting an another div with the same background color and height, floating left at an x-offset of the width of the original navbar. The keypresses were being hijacked - it seems they've stolen all keyboard input for any elements that exist within the "Microsoft.Map" div. My div is one level higher up.
Here's how it turned out:
And if anyone's interested, the default height and color for the Bing Maps v7 navbar is 26px, #FAF7F5.