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
Related
I have a problem that seems pretty simple to me, but so far it was impossible to find a simple solution: On my website, whenever the Android soft keyboard pops up, it resizes the window and shrinks the content, instead of just overlaying the page.
See these pictures for reference:
The first two are the current situation, the third is what I want. It works like this on iOS. What can I do to make it work that way?
The screenshots were taken in Firefox - this is a website based on HTML, not a native app.
I tried setting body size and position, but so far, no luck. I've seen some very complicated JS code snippets for similar problems, but I didn't get any of them to work the way I want, and it also seems like there should be an easier way around it. The sizes of all the elements are determined with vh and wv. Setting fixed pixel values seems like it would kill the responsiveness of the design, no?
I'm not a very experienced developer, my page is just very basic HTML and CSS. Is there a way to achieve what I want with only that?
On your manifest.xml you can set android:windowSoftInputMode to adjustPan.
<activity
android:name=".WebActivity"
android:windowSoftInputMode="adjustPan" />
From Android documentation:
Don't resize the window to make room for the soft input area; instead
pan the contents of the window as focus moves inside of it so that the
user can see what they are typing. This is generally less desireable
than panning because the user may need to close the input area to get
at and interact with parts of the window
Hay, I have problem with google cache. I want the homepage of my site in google cache will be shown correct and not broken, like the source. this is the source:
https://www.fnx.co.il.
the cahed page is here.
I googled it and I found answers to check if links are up-to-date, or to check reltive links. it is not the problem. even what is missing is font files. the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
is there way to prevent from google to add its elements to the page, or another solution that will make the cached page look good?
To start with, you have an error in your normal page that you would need to fix first:
fullPage: Fullpage.js can only be initialized once and you are doing it multiple times!
That means you are initialising fullPage.js multiple times and that's why scrolling down in a Macbook trackpad (or some other kinetic scrolling devices) will scroll more than one section at a time.
Make sure to fix that first.
the site uses fullpage.js to inital sections, and I think the problem is that google adds it own elements, that disrupt the initialization of page. page without fullpage like search results are shown correct.
It doesn't seem to be the issue. The fullpage.js site is displayed almost correctly (besides the top margin issue) in Google cache
I would try to use the latest fullPage.js version (3.0.5) and then see if you still have the issue.
I'm trying to create a page with Google Maps frame that occupies whole screen, but I also need a sticky footer at the bottom (where I can place button/icons).
I would like to have my layout based on Bootstrap 3, it should be responsive.
Can you point me to the right direction?
I do not post any code because the one I am working on is useless.
If you look on googles website they have a wonderful API for drop-in google maps. I've used it with bootstrap and it works fine (you can still edit it's height/width, border, ect.) Check it out here...
https://developers.google.com/maps/
As for the bottom footer did you try playing with the css for layering already?
I have created a most basic example for you: http://jsbin.com/fazah/3/
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.
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