I have searched for this and it seems that the solutions I have found are not working for me.
The end goal is to have two tabs, one with google maps v3 (that shows by default, haven't gotten that far) and one tab that is hidden until clicked on.
I can get the tabs to work, but google maps does not show, I have used the resize and set center in the function for the tabs but still not working. I also have the width & height set to 100% (for mobile devices).
Can anyone take a look at the code and point me in the right direction, it would be much appreciated! Again, the ultimate goal is to have the maps tab show on page load and then the tabs work as a user clicks them, showing the appropriate tab. But at this point the map tab doesn't even show the map.
my code can be seen at http://m.lewis-realty.net/map/test2.php?gps_lat=34.43640541614963&gps_lng=-77.5616387038574.
Thanks!
Chris
Not sure if this is what's causing the problem, but on line 94 of "functions.js", there is a javascript error -- You're missing opening and closing parens around the "if" condition.
I don't have a way to test it out right now but it's worth a shot.
I figured most of it out.
Along with the map resize that was already in my code, I added this to the tab function:
$('div#' + $(this).attr('data-href')).css('{display:block;width:100%;height:100%;}');
which changes the css style for the div you are selecting, so now the map works fine.
When you show the tab that contains the map, remember to trigger the resize event on the map so that it can recalculate its size.
google.maps.event.trigger(map, 'resize');
Related
I use shortcode to embed an HTML world map on one of my web pages. Right below the world map is a third party link for which I want to set the display value to "none", however since I have no CSS skills or web dev background I am having difficulty writing the custom CSS for this. I've played around with containers and specific page ID's, but no luck. The page is www.sheerheroine.com/map. Can anyone steer me in the right direction on how to write the code please? When I inspect the page I can see which container the link is in, however when I use this container the entire map is removed. Thanks!
The !important declaration makes the display CSS impossible to override. The following javascript would remove the element you wish to not display -- document.getElementsByClassName('fm-map-container')[0].childNodes[3].remove();. Try it in the developer's console. For it to work on the page, you would need to delay the execution until the element exists though. As others suggest, it would seemingly violate the terms of use of the lovely vector map you are using free of charge. For a proof-of-concept, however, you may find this code enlightening.
As the entire map con-taint is coming because of thirdparty image, better check with the that third party style code.
Or
in alternatively, just check the the height of the total map area.
lets assume here total height of map image is 10px from bottom.
and lets assume the height of that area(to which area,you don't want to show user) is 2 px from bottom.
Then create a div element, where you will put the entire map image, but follow the below stlye, where we can hide some portion of image to user
<div style="max-width: (10 - 2)px"> here .. put your map image url..</div>
When I search any thing in input Search and zoom out (ctrl/-) on my website , place of result of search will be change ! How I should fix it that result of search open bottom of input search exactly ?
My url : link of my website and it's pic of result of search : pic of my website
Looking at your website it seems that you have a script which generates the results using absolute positioning after results are loaded. Upon zooming out the absolute positioning is no longer relevant.
If it were possible, a solution would have been to listen for the browser's zoom event and recalculate this, however there is currently no way to do that. More information about that in this SO question: Catch browser's "zoom" event in JavaScript
The ideal solution would be to change the structure of your dropdown to not need absolute positioning if you want to handle this scenario.
Alternatively, you can keep searching for ways to listen to the zoom event and update the positioning of your dropdown using the search input's left offset.
I set up a Google Maps v3 at our website at http://wallawalla.tk/services and I encounter a minor distortion issue. That is, if you look at the map very precisely, you'll see that there are random "white/gray stripes" appearing. Most important at the very left side of the map and especially when opening InfoWindows respectively closing them. It appears that "white/gray stripes" are somehow related to the border of the InfoWindow, i.e. it seems that if one of the borders doesn't show up (most of the time at the very left side of the respective InfoWindow), there is a random "white/gray stripe" appearing near or even through the InfoWindow. Unfortunately this isn't reproducible 100% of the time which makes it even more suspicious to me. Please try to open/close some of the InfoWindows to actually see it. I guess it is somehow related to our CSS. I read a lot about related distortions but nothing seem to fit my specific case. The "white/gray stripe" on the very left side of the map itself is reproducible almost 100% of attempts trying to reproduce. All "white/gray stripes" are 1px in width and they disappear if you either pan the map or scroll it out and back into the viewport of the Browser window. I'm testing with Google Chrome 22.0.1229.79/Webkit.
Doesn't seem to affect FF11.0/Gecko. Tried it just yet and while Chrome shows described behaviour, FF doesn't
My guess is that it is being caused by OverlappingMarkerSpiderfier. Can you build a simple test that displays your points and InfoWindows without using OMS and see if you still have the issue?
For some reason, the arrow on the tooltip for each graph point appears below the actual label(see image). I have tried doing everything to move it and can not figure out why this is happening. The tooltip is generated automatically by dojo's chart library. It appears fine in the demos.
Does anybody have an idea why?
EDIT:
I am using Dojo 1.7.2.
The code is question is
this.linePlotName is part of the object that the method below resides in.
var anim = new dojox.charting.action2d.Tooltip(newLineChart, this.linePlotName);
I had the same issue after I upgraded my Dojo from 1.6 to 1.7.2, but this issue was actually a bug and it is fixed now in 1.7.3: http://bugs.dojotoolkit.org/ticket/15016
Upgrade and it should be fine.
It's hard to say, without seeing what else is going on in your code. However, it's important to keep in mind that the tooltip's behavior is influenced by the widget/div/frame it's contained in. If there's not enough room to render the tooltip graphic on top of the plot line, it will be drawn under it. Try increasing the size of the container the chart is contained in, and try increasing the size of the chart itself, so there's plenty of room above the plot line for the tooltip to appear, or even try just scrolling up/down. It's best to rule out the easy fixes first. :) If that doesn't work, please comment, and we can go from there...
i'm trying to use overlays on a custom google StreetView Panorama.
I was able to simply put one on my pano, but the position is totally random (i made some attempts until the effect was alright), and the change of rendering mode (in chrome which renders as a sphere) changes the effect.
The problem is clear: the custom panorama has no information about its dimensions (it has only a LatLng), so the relative positions are wrong.
Am i missing something?
The only thing i need is to put some clickable labels on the walls of a room, which modify themselves along with the rotating panorama. I searched a lot, but my efforts were inconclusive.
Mapsicle seemed to do what i needed, but if i understood correcly it's a dead project.