Here is the fiddle i worked on http://jsfiddle.net/fyDkD/14/
My HTML is here
<div id="map-holder">
<div id="map_canvas" class="bigmap"></div>
<div id="map_stv" class="minimap" style="display:none"></div>
</div>
My CSS is here
#map-holder {
height: 1200px ;
position: relative;
}
.bigmap{
width:100%;
height:100%;
}
.minimap{
width:50%;
height:100%;
}
#map_stv {
position: absolute;
top: 0;
right: 0;
}
#map_stv img {
border: none !important;
max-width: none !important;
}
In this i see that when we drag and drop the pegman anywhere on the google map then we get the streetview. The street view is not proper only in Firefox browser. Also i have seen that if the difference between width and height is considerably large then we can see the issue very easily. The img of street view is not showing properly. Please suggest on this.
This can be fixed by adding
mode: 'html5'
to the panoramaOptions. I tested it and it works.
See Google's answer to this this bug report I sent them:
https://code.google.com/p/gmaps-api-issues/issues/detail?id=7246
Related
I'm working on a project in which I'd have a Google Map on a page on which a user has to mark a specific location. On non-touch devices, draggable markers that return coordinates on drop, solves this problem.
However, the project I'm creating requires this functionality to also work optimally on mobile. Does anyone have an idea of a nice alternative to drag and drop to get coordinates on a map?
Please note that the locations that are selected will not be related to addresses, so I cannot reverse geocode addresses.
Any help is appreciated.
tl;dr; I need a touch-friendly way for users to mark a specific location on a Google map to get its coordinates.
As geocodezip pointed out, the standard drag events still work on mobile. However, I prefer a different approach. Using drag events on touch devices feels counter intuitive. The users thumb is on the pointer and they cannot see where they drop it. Users need to drag the map, and also drag the pointer, which is a hassle on a small screen.
I've found a solution with a centered image overlay, without using images.
The HTML of my map is as follows:
<div id="map">
<div id="map_canvas" style="width:100%; height:400px"></div>
<div id="cross"></div>
</div>
Then I place the cross div over the map like so:
#map {
position: relative;
}
#cross {
z-index: 9999 !important;
position: absolute;
top: 50%;
width: 100px;
height: 100px;
left: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
}
Then I create a crosshair with some CSS-magic:
#cross:before, #cross:after {
content: "";
position: absolute;
z-index: -1;
background: #d00;
opacity: .5;
}
#cross:before {
left: 50%;
width: 30%;
margin-left: -15%;
height: 100%;
opacity: .5;
}
#cross:after {
top: 50%;
height: 30%;
margin-top: -15%;
width: 100%;
opacity: .5;
}
By using ´pointer-events:none´ in CSS, any mouse or touch events should pass right through. Haven't tested in legacy browsers though.
#cross, #cross:before, #cross:after {
pointer-events: none;
}
Please find my complete solution here:
http://jsfiddle.net/4vrzgrx1/2/
My answer builds on this related question:
Google Maps transparent image overlay
Hope this can be useful for some people.
i have problem with this code and the problem is that before 1200px everything is OK but after re-sizing to 1200px and more ( before width of scroll bar, for example chrome scroll-bar width is 17px ) before 1218px, we will see unwanted horizontal scroll-bar annoying us.
i want to solve this problem but i don't know how.
anybody knows how? so please guide me.
link of my codes and online test:
https://codepen.io/mostafaeslami7/pen/xZePXq?editors=1100
my html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<div class="header">
<div class="inner-header">header</div>
</div>
<div class="body">body</div>
<div class="footer">
<div class="inner-footer">footer</div>
</div>
</body>
</html>
my css:
*{
box-sizing: border-box;
margin: 0;
padding: 0;
color: white;
font-size: 30px;
text-align: center;
}
body{
background-color: orange;
}
.header{
border-bottom: 1px solid black;
}
.inner-header{
background-color: black;
}
.body{
height: 3000px;
background-color: blue;
}
.footer{
border-top: 1px solid black;
}
.inner-footer{
background-color: green;
}
.header,
.footer{
width: 100%;
height: 100px;
}
.inner-header,
.inner-footer{
height: 100%;
}
.inner-header,
.body,
.inner-footer{
width: 1000px;
margin: 0 auto;
}
#media screen and (min-width: 1200px){
.inner-header,
.body,
.inner-footer{
width: 1200px;
}
}
I know it a old question. but i had like to share this, Hopping someone will find it useful and will save someone's day.
So, There is no quick way, You will have to do some digging and find yourself the element which is causing overflow. Thus, creating unwanted horizontal scroll and pain in your ass. Normally one way would be to just write
body {
overflow-x: hidden;
}
and hope that overflow-x on body will remove that horizontal scroll bar but some times you have to apply overflow:hidden to you main container of the site. Which likely works all the time or most of the times. like,
.main_container {
overflow: hidden;
}
There are some tricks that can help you find those overflow elements such as using below JavaScript script, just open console and execute it there
var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
document.querySelectorAll('*'),
function(el) {
if (el.offsetWidth > docWidth) {
console.log(el);
}
}
);
OR you could execute jQuery one,
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});
or you can use this little jquery snippet. It will logging out the elements directly in console along the elements width, which can help you to easily highlight them on hover in your console (at least in Chrome).
$.each($('*'), function() { if ($(this).width() > $('body').width()) { console.log($(this).get(0)); } }).length;
or if you still can't find that particular element use this below trick,
//Open inspector -> “New Style Rule”:
* {
outline: 1px solid red;
}
You can always add: opacity: 1 !important; visibility: visible !important; if you think you might have a hidden element but usually the above works without extra effort.
Hope it helps someone. Happy digging.
I can't really recommend it but you can use overflow-X:hidden on the body element (not the element with a class of .body*). It's not as though you need to see anything outside of the sides of your container anyway...right?
* you should really not use that name for a class, it's unnecessarily confusing.
#media screen and (min-width: 1200px) {
body {
overflow-X: hidden;
}
.inner-header,
.body,
.inner-footer {
width: 1200px;
}
}
Ideally, you should adjust the design to allow for this though. Different browsers treat the scrollbars differently when it comes to calculating the viewport width.
Codepen Demo
You can change your .inner-footer from width: 1000px to max-width: 1000px; and that will fix the issue.
Here you change code like that. overflow-x: hidden; is hidden the horizontal scroll bar.
body{
background-color: orange;
overflow-x: hidden;
overflow-y: scroll;
}
You could solve this in quite a few ways - one of which is changing your width: 1000px to max-width: 1000px
Another might be simply styling / hiding the scroll bar with some -webkit prefixes. Wouldn't recommend this route for multiple UX reasons but if you want to read up on styling scrollbars - check out this resource.
Lastly you could specifically target the x-axis scroll bar with overflow-x and remove / hide it by setting this to hidden. Again - this method is not the best. How would a user know content is off the page without the scroll bar?
i solve it very easy. if you define min-width media queries = width + scroll-bar width ( for example in chrome is 17px or in opera is 15px but for sure we say 20px ) the problem will be solve.
new link of code:
codepen.io/mostafaeslami7/pen/JGVLdK?editors=1100
I'm having a problem with border-radius on iPhone and iPad. I'm trying to generate a round googlemap, which is working fine in every browser and on every system except ios.
What I've done so far is, I've got a map-canvas
<div class="col-sm-4"><div id="map_canvas"></div></div>
and my css
#map_canvas {
height:474px;
width:474px;
border-radius:237px;
margin-bottom:73px;
display: block;
overflow:hidden !important;
position: relative !important;
}
after this wasn't working, i tried to add more border-radius:
.gm-style {
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
}
#map_canvas .gm-style > div {
border-radius:237px;
}
but still no success. Here's a live example:
http://kristinwalzer.at/website/kontakt.php
Anyone knows this problem? And a solution perhaps?
Add one more div for round box and add properties to that round box
<div class="col-sm-4">
<div class="roundBox">
<div id="map_canvas"></div>
</div>
</div>
.roundBox{
height:474px;
width:474px;
border-radius:237px;
overflow:hidden !important;
position: relative !important;
z-index: 999;
}
#map_canvas {
height:474px;
width:474px;
display: block;
border-radius:237px;
}
I've found this In webkit browsers, v3 google maps do not respect container's border-radius. Anyone have a workaround?
All fiddles in this post won't work on safari (windows and ios).
But even if they said in that question that it is solved, it is not. Looks like a Googlemap V3 Bug.
I am writing a jquery mobile app which needs a map.
For the map I am planning to use Google maps service.
To account for orientation changes, I tried to use something like:
<script>
$('#page-map').live('pagecreate', function(event) {
var map = $('#map_canvas').gmap({
...
});
...
$(window).resize(function() {
$('#map_canvas').width($(window).width());
$('#map_canvas').height($(window).height());
});
)};
</script>
The problem: this code correctly resizes the map canvas when the device is rotated, but it looks like jquery mobile resize() is skipped (the url bar is visible, for example...).
Not even adding to the "resize(function() {" code something like this:
google.maps.event.trigger(map, 'resize');
is of any help.
UPDATE:
The issue only happens on the only mobile device I'm testing my pages - a Samsung Galaxy Mini (GT-S5570), Android 2.3.4 (Gingerbread). It does not happen when resizing window on a desktop PC (i.e: on a desktop browser map_canvas is correctly filled when browser's window is enlarged, even without the resize() binding, only due to width/height at 100% on map_canvas...)
I assign a size through css to my map in jquery mobile
I add the map_canvas inside div with dimencion deuin want in this case 100%
CSS
#map_content {
padding: 0px;
width: 100%;
height: 100%;
overflow: hidden;}
#map_canvas {
width: 100%;
height: 100%;
padding: 0;
text-shadow: none;}
HTML
<div data-role="content" id="map_content" data-theme="a">
<div id="map_content">
<div id="map_canvas"></div>
</div>
</div>
I've tried the above answer (plus many others) and nothing worked for me. Actually, the above code was working for me, but just until I started using jQuery Mobile. Somehow, when I load jQuery Mobile (funnily enough, I noticed that it's the JS, no the CSS) the map_canvas has no height (a trick to check the height of the element is adding a border to it like border: 1px solid red;).
Eventually, I managed to solve the auto-resize when the orientation changes by using the following code/css:
<div data-role="page" id="pageID">
<div role="main" class="ui-content">
<div id="map_canvas">
</div>
</div>
</div>
And in the css:
html,
body,
#pageID {
height: 100%;
margin: 0;
padding: 0;
}
.ui-content {
padding: 0;
}
.ui-content,
.ui-content #map_canvas {
height: inherit; /* the trick */
}
So, basically the: height: inherit; solved the problem for me.
Credits: https://jqmtricks.wordpress.com/2014/12/01/content-div-height-css-solution/comment-page-1/#comment-250
I hope it helps!
I have been working on a project in GWT for which i need to show a loading image as like "Please Wait...".
I was able to fix this till page loads. But during history token changes, i cant show the same. I created a division as shown below,
<div id="loader">
<div id="loaderPanel">
</div>
<div id="loaderImage">
<div id="loaderText">
<b>Please Wait...</b>
</div>
<img src="images/loader.gif"/>
</div>
</div>
Also, here is my CSS
#loaderPanel {
background-color: white;
display: block;
height: 100%;
left: 0;
opacity: 0.8;
position: fixed;
top: 0;
width: 100%;
z-index: 1001;
}
#loaderImage {
background-color: transparent;
left: 48%;
position: fixed;
top: 48%;
z-index: 1002;
}
#loaderImage img{
height:22px;
margin-left:4px;
margin-top:0px;
width:119px;
}
#loaderText{
font-family:'Verdana';
font-weight:bold;
font-size:0.9em;
float:left;
}
This is the piece of code i used to make the DIV visible & invisible.
DOM.getElementById("loader").getStyle().setDisplay(Display.NONE);
DOM.getElementById("loader").getStyle().setDisplay(Display.BLOCK);
Can anyone please suggest me a better way to show a loading GIF image for History Changes?
YOu should implement HistoryListener and show the gif when the onModuleLoad() method is called:
http://google-web-toolkit.googlecode.com/svn/javadoc/1.5/com/google/gwt/user/client/History.html
I got the Answer,
It was not showing the Loading Image because the execution locally was much faster. But when it comes to production mode, i found that, it is showing a loading image for a while.
Since my client strictly needs to show the loader, he suggested me to add a small delay. So i added the delay inside a Timer Scheduled. By the time it shows the loader, i did the Pre-Fetching of the Images and other objects used in the page.
So i mark my question as Closed...