Have used google maps dozens of times but cannot get around this one. Doing google's simple hello world for map version 3 (http://code.google.com/apis/maps/documentation/javascript/tutorial.html#api_key)
However the tiles only appear in the upper left part of the map canvas and even when dragging / scrolling they continue to stay in the upper-left. See pic: http://sandbox.thecanarycollective.com/whiteboard/2012-03-05_073019.png
I have played with the CSS on the page quite a bit to see if it was getting screwed up by something else but no luck. Anyone ever see this before?
The individual tiles are div elements. Try turning off the css on your page and see if this problem still occurs. Then use a tool like firebug to examine the HTML of the page - see if the missing tiles appear in the HTML.
Using firebug, write this into the console:
google.maps.event.trigger(googleMap, 'resize');
where googleMap is the map element. This may fix things if you're resizing the map after it is created.
If none of these help, post your javascript, css and HTML - its hard to think of what to suggest when you just provide a fixed image.
Related
I am having problems getting a Google Map to show up correctly with Bootstrap, here is what I have going so far - see here
see above
So on a callback after the Google Maps API loads, I am then initializing the map, but it just wont fill up the available space. I can see from inspecting the elements in chrome debugging tools that the map has loaded in and the maps generated markup appears, but its just the sizing that seems to have gone wrong.
No doubt I have done something wrong, please advise, thanks!
EDIT
Ok I have got further now, map showing up just fine, but I am struggling using the grid system to lay out the page so I have space to the left of the map where other content will appear (eventually a sidebar that will show\hide based on screen). But this new plunkr wont show it, what am I doing wrong?
Your grid is working fine.
You used col-lg which is for large monitors, so u'll see the grid work only on that point.
Specify the other devices too, or you can only use the smallest device that you need.
Example: col-sm-4 and col-sm-8
I'm looking for something like CATiledLayer (on iOS), but for use in PhoneGap/Sencha Touch 2.
The idea is to "stream" a very large image from a server in form of tiles - very much like Google Maps does the job.
It should support touch gestures on mobile devices so a user can pinch zoom and scroll.
Unfortunately I couldn't find something - so a few pointers are highly appreciated.
Update:
In the meanwhile I took a look at OpenLayers, which seems to what I want and manages multiple layers of zooming and such. Unfortunately it is hooked too much into Geospartial data and there is no way to disable projections to make it work like a basic image viewer.
I also found GSV (Big Ass Image Viewer) - unfortunately I doesn't support touch gestures and generally seems to be abandoned.
To me it's just weird that nobody really had the need for something like this and I try to prevent "re-inventing the wheel" as much as I can. But right now it does not look like there are any non-geodata/map related solutions.
I've never seen anything like this done using Sencha Touch 2, though I'm going to assume that putting something like this together wouldn't require much.
It would basically be your custom component (which would be scrollable). Inside that component you would insert 1 child which would be the size of your image (lets say; 15000px x 15000px) so it overflows. You would then listen to the scroll event on the parent container and when it gets to a certain x/y state, update the child item with that section of the image.
I'm not sure what the best solution for the child's HTML would be. Perhaps a bunch of divs, but I'm thinking <canvas> would be best for images.
I'm created a very large map with many poly areas (over 20 coordinates each) for regions within the map. However, you can't add css to the AREA tag as I was told it's not a visible element. What I want to do is when the user hovers over an area on the map, I want it to be "highlighted" by applying a 1px border to the specific AREA element. Is there a way of doing this? No, I'm not going to resort using rectangles.
Not possible with CSS.
You might check out the Map Hilight jQuery plugin, though.
EDIT 10.2011
ImageMapster is a more recent, and more powerful plugin you should also check out.
If you want to be able to use arbitrary shapes and still use styles, have you considered trying SVG?
I'm not an SVG master but here's an example I whipped up: http://jsfiddle.net/tZKuv/3/. For production you may want to replace the default stroke with none, I used gray so you can see where it is.
The disadvantage is that you'd lose the ease-of-use area/map gives you, but I imagine you can accomplish your goal if you go this route. I added cursor: pointer to the polygon and you can add onclick handlers to simulate the href of <area>.
An obvious caveat is browser support. This seems to be working in Chrome, and I am pretty sure it should work in IE9 (jsfiddle's not working in IE9 at the moment), but previous versions of IE don't support SVG.
Update: Made a quick test page to test IE9. It does indeed work as expected. Here's the source.
Update again: This would also solve the zooming problem you asked about in another question.
Nope, there is no way to do this as you describe. I've researched it and tried. What you can do is set up mouseover events on the various segments and swap some overlay image that is shaded in the same area.
I'm using GAE Java and GWT together on a website which is primarily a large map with basic infowindows. I want to customize my info windows and I know how I want them to look-- but making this become a reality proving itself be tricky. Here's what I want it to look like:
Whenever a marker is click, a new info window will appear a few pixels to the right of the marker. The overlay will animate onto the screen, growing from nothing to about 300px by 300px. This overlay will contain information injected from the GWT portion of the code and will have a button to close the div in the top right corner.
Writing this in plain JS or jQuery would be no problem for me, but what I'm having trouble deciding is how and where I should inject the div into the proper position ON THE MAP CANVAS? Once i understand how I ought to do this, I believe i can finish the rest of the work myself.
Thanks so much!
probably too late for an answer but for anyone else who'll end up here,
the following link should get you going
http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html
I'm trying to do something very similar to this example (source code enabled):
http://www.sunild.com/proto/line_chart_example.html
When you hover over each data point, a circle appears indicating that this is a point. How do I keep those circles visible at all times?
Edit: this example isn't mine, but you can view the source enabled here:
http://www.sunild.com/proto/line_chart_example_src/index.html
Umm, the case you show is a working example giving no details about the code itself. There are enormous ways the code could be.
For Eg - The code could be keeping an event listener over & out a mouse event...So removing it pretty much keeps the circles there.
But still I suggest show at least what you are doing, if not that code to get some clue.