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/
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 am working on my first full-page map screen. I am adding a couple custom controls on the map. One being a legend, the other a way to query our system and place pins on the map. I have been able to place the controls on map and it works well. I have one in the TOP_RIGHT and one in the TOP_LEFT. I would like to make this responsive now. I would like the legend to take up the entire bottom of the map, and the inquiry control to go to the top. I can't find anything on how to make this responsive. How do I go about accomplishing this? Online resources would be great.
Update: I realized I didn't make this clear. On PC/tablet, I want the legend in the upper right and on the phone, I want this to be all the way across. Similar to how this page works.
It's quite simple, set the width of the HTML-elements to 100%.
Be sure that these controls dont overlap with the default-controls.
Demo: http://jsfiddle.net/doktormolle/16r1777q/
This is probably a really simple question. I have a link on the page tsawebmaster1.hhstsa.com/web_design.html that links to a div on the same page as the link itself using tsawebmaster1.hhstsa.com/web_design.html#seven_steps and it works just fine. The problem is that my fixed header is at the top of the page and thus overlaps the content by 100px, so when it takes you to that div, the user does not see the top of the div linked to. Is there a way I can link 100px less than a certain div.
I don't know if this will work but you should try this:
Our seven core steps to web design will teach you the simple steps on how a website is built. Before delving into any new topic, it is important to develop background knowledge of the whole picture. This way, when you start actually learning web design in depth, you'll be able to connect your under
Try put an empty paragraph between your logo and the contents.
You better use javascript to reach your goal. the window.scrollTo(x,y) function can make your page scroll to a specified amount of pixels on click (also it will look much more neat).
documentation: https://developer.mozilla.org/en-US/docs/Web/API/window.scrollTo
usage:
click to scroll down 100 pixels
I'm building a responsive site and I have it set so that when the site is viewed on a mobile phone, I will hide certain code via Bootstrap's "hidden-phone" class. I am using this feature for a heavy slider that I don't to be shown on a mobile phone. But, does the code actually not load or does it load but is not visible? If it does load but does not become visible, I don't see what the point of that is...
Thank you.
Maybe you should think of replacing your slider with a different element instead of hiding it.
Also,this might help you:
how to use responsive features of bootstrap 2.0
I have a little project with Google Map API: to show a small map on page. But the Google logo and copyright word are overlap together.
Can I move them out? And how?
screenshot here
You could do this fairly easily with CSS, but you'd break Google's Terms (see section 7.4).
If you can't make your window bigger, you could use an alternate mapping solution, like OpenLayers