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.
Related
I have an element common to all pages that uses a font called "Just Another Hand" provided by Google Fonts API. On one of my pages, the element coincidentally happens to load in front of a Google Map and I noticed that when this happens the font rendering changes to a more eye-pleasing, fuzzier but smoother appearance (see screenshots below). I am using Chrome v.29 on Windows 8.
Further observations: Notice the grey header text (also visible in screenshot) does not change dependent on the presence of a Google Map. Use the inspector to remove the z-index property and the font rendering will return to it's original, less eye-pleasing state. The element has to be in front of the Map for any effect to happen.
Why is this happening and can I leverage one of the technologies to force/suppress this effect?
P.S. I appreciate this is not a coding question by I am hoping it will receive a coding answer.
I'm currently developing a webpage containing a map based on Google Map Api V3 : http://www.fairaidsyria.org
I have two overlays containing polygons that appear successively as the user zooms in..
Unfortunately, annoying "white flashes" occur when zooming. The problem even occurs at max zoom levels, when both overlays are not displayed...
The blinking seems to be directly related to the presence of polygons in the zoomed area, because if you try to zoom somewhere else in the world (area without polygons), everything works fine : no flashes.
I suspect this phenomena to be "native" and not related to a mistake I could have done. In fact, the same flashes also happen when you zoom in the triangle in the following official example : https://developers.google.com/maps/documentation/javascript/examples/polygon-simple?hl=en
Did someone find a way to solve this?
based on this good article change your meta viewport tag to:
<meta name="viewport" content="initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
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?
I'm displaying an image over the entire google map. The image is transparent. I follower the documentation from google and everything worked out fine. The image will change each time i move or zoom on the map. After a while I can't zoom or move the map anymore, I'm zooming and moving only the image. Why does this happen and how can I solve it?
There are multiple issues contributing to problems on the page:
You are destroying and recreating your overlay on center_changed and zoom_changed events. Instead, you should just be updating the image within the overlay. You should really only need to create the overlay once.
Instead of adding your weather image to your OverlayView, you are adding it to a div that covers the map. This is what is blocking your events from effecting the map (the click and drag events are occurring on your weather div not the map).
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');