The Person Icon that represents the Street View on Google maps seems to be having issue on my insert. I am using the v3 api and The Icon placement is there but the icon seems missing or distorted.
If you look at the image something is there but it disappears on hover. Any ideas what could cause this.
I believe its could be to do with some of my pages code as if i do a vanilla version it seems ok, but i am not targeting this at all and was wondering if anyone else has come across this and might have an idea etc
This is definitely a CSS issue. Look for CSS that is applying to all images like:
img {
max-width: 100%;
}
Select only Google Maps and keep the rest of your site responsive
.gm-style img {
max-width: none;
}
Just set:
img {
max-width: none;
}
Related
https://www.insure.report/en
I need to fix the Updates widget to have a top margin so it isn't covered by the header OR I need the widget to load on top of the header, not behind it.
Then I need to hide the 'Submit an idea' link.
I'm still new to CSS and the Submit link uses several classes so I don't know which to set to display none.
Any help or guidance is appreciated.
Without seeing your html and css it's hard to be absolutely positive but I gave the id frill in dev tools a property and value margin-top: 20px and that seems to solve your first question in dev tools. Since you are using bootstrap, in your custom CSS stylesheet you'll probably want to add:
#frill {
margin-top: 20px!important;
}
For the submit link you could give that link a class, like class="hide-link" in your html and then give that class a CSS rule of display: none; like:
.hide-link {
display: none!important;
}
I configured it according to https://help.frill.co/article/75-adding-the-widget
It's not really the right answer because what I was seeking was not done. But I removed the top elements instead.
Was hoping to increase the height of the google map module in Divi but my CSS code is not working and do not understand why. I am pasting the following code within Advanced > Custom CSS > Main Element of the Map Module
.et_pb_map {
height: 440px;
}
Any suggestions would be very useful!
Absolute Map for Divi Theme
Add the following CSS in the Row Settings/ Custom CSS/ Column "1" Main Element (column number is where you will put the map):
position:relative;
Add a Class to Map Module. In this example the CSS Class is absolute_map
Add the following CSS in the Custom CSS box:
.absolute_map .et_pb_map {
position: absolute;
overflow:visible;
height: 100%;
}
Be happy!
Try to add padding instead of an explicit increase of height.
#map ,#map .et_pb_map {padding-bottom: 56.25%}
You might have to adjust the selector. Usually #map is enough though.
and adjust the padding percentage to modify the aspect ratio. This is responsive.
The reason why this might work is because padding creates more space for the background - map in the case of this iframe - to be painted thus expanding it.
Read more on this here
Working demo on JSFiddle
If you're customizing through that section (Advanced > Custom CSS > Main Element) of the Divi Builder, just add the property declaration not the entire CSS rule.
height: 440px;
no need to add css class in the advanced > custom css. just add the property value 440px.
use !important for overnight css
.et_pb_map {
height: 440px !important;
}
Just add !important to your css
.et_pb_map {
height: 440px !important;
}
Use below code.
Please use your google API key here in this js file.
If you wanted to increased/decreased height of map then do changes in #div_gmap.
#div_gmap {
height: 440px;
}
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>
<div id="div_gmap"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('div_gmap'), {
center: {lat: 22.3039, lng: 70.8022},
zoom: 12
});
}
</script>
If this thing is not working well then might need to check some of the css or any other framework causing this issue.
The best way to test out why the css dimension code doesnt work is to use chrome dev tool.
Press Shift+ Ctrl + I (or cmd + alt + I if you are safari user) and open up the web dev tool bar. Go to the Elements section and you will see styles controller. In the styles controller, you click on the elements you wanna check on the DOM side, in your case, it's probably <div class="et_pb_map">...</div>, or you can press ctrl+f to search et_pb_map.
After you have done that, you can go to the box viewer in the style tab and see why it doesnt work out.
I would say sometimes if you use padding/margin and didnt set overflow property well, it will crop out your elements. Or maybe your class is being overlapped by other class. You can use embed style to override that <div class="et_pb_map" style="...">...</div>, or simply put your class as the last class in the class attributes.
Example on using chrome web dev tool bar
Go to Appearance -> Customize -> Additional CSS and paste this code
.et_pb_map iframe {height: 400px !important; }
This will help you Check this jsfiddle
This is the only solution that worked for me. Assign a class to your map module i.e. .map-height and target it like this:
.map-height .et_pb_map {
overflow:visible;
height: 500px!important;
}
The simple approach is:
Go to Divi Theme Options
Scroll down to Custom CSS
Enter .et_pb_map {height:500px;}
Click Save Changes (the map will now change to 500px height)
I am trying to integrate Google CSE in a page with BS3. Looks like BS3 is messing up the search box and button.
http://jsfiddle.net/DTcHh/509/
This is how the code looks in IE and Chrome http://i.imgur.com/vungb7v.png
The search icon is missing in the button and the bottom bar is missing in Chrome.
I tried playing around with
input.gsc-search-button
.reset-box-sizing *
but since I have only basic CSS skills I cannot figure out how to fix this. Can someone please tell me how should I fix this so that the box and button looks fine in IE and Non IE browsers.
All what you have to do is to replace the CSS values that are making problems and to know what you must replace and what are the values that you must change to is to take advantage from Google Chrome's "Inspect Element" feature.
You can see the effect on my own server on :
http://link-sa.ga/gcse/
Download the source code:
https://www.dropbox.com/s/bo01xp2agvp7w4e/index.html
JSfiddle:
http://jsfiddle.net/rsm23/GPLyM/
Read the comments under the GCSE call for the css code is should be like this :
<gcse:search></gcse:search>
<style type="text/css">
body {
margin: 10px;
}
#gsc-iw-id1{
height: 30px;
border-color: #898989;
}
input.gsc-search-button-v2{
width: 71px;
height: 29px;
}
</style>
I'm using Google Maps API v3 in my application. Maps Pan control isn't displaying properly on IE 10 and IE 11.
.
It's working fine on Chrome, Mozilla and IE8, IE9. I can't figure out the way to resolve it.
on Stackoverflow, a nearly similar question is posted here: Google Maps zoom control
but not solution is not application. Definitely, it's the CSS issue, but I couldn't resolve it. I've checked in IE developer tool for any css class overriding, but no luck.
Have anyone faced the similar problem or anyone had any solution for this?
EDIT: The basic map is also disordered in my IE 11 version.![enter image description here]
-- Anil
Well, as #geocodezip suggested, it's a bug till today in Google map API and best solution for it is to use css.
use below css on the page :
.gmnoprint div[title^="Pan"]
{
filter:alpha(opacity=0)!important;
}
hope it would help others and save time.
-Anil
I just added the styling to my CSS , and fix
.gmnoprint div[title^="Pan"] {
opacity: 0 !important;
}
An important addition to non-English localizations:
You must use in style not "Pan", but the text specific to your locale. For example, for Russian localization - "Пан".
Hover your mouse on a button of pan Control and look pop-up hint. In style the first 3 letters from it are used.
FWIW - I've found that the above CSS isn't enough because we next get "+" for zoom in/out for street view. I made a slight modification...turn off all title items except the one we don't want hidden.
.gmnoprint div[title]
{
opacity: 0 !important;
}
.gmnoprint div[title^="Exit Street View"]
{
opacity: inherit !important;
}
Late to the party I know, but when I came across this issue I implemented the following fix for my applications using Google Maps V3 which I know is similar to what has already been posted here, but just in case it helps as I know how damn frustrating these sorts of issues can be!
<script>
var doc = document.documentElement;
doc.setAttribute('data-useragent', navigator.userAgent);
</script>
<style type="text/css">
html[data-useragent*='Trident/7.0'] div[title^="Zoom"]
{
opacity: 0 !important;
}
html[data-useragent*='Trident/7.0'] div[title^="Pan"]
{
opacity: 0 !important;
}
</style>
I am creating a maps plugin for Wordpress that uses Google Maps JS API V3. Commonly the maps will be embedded within a wordpress post that has images that are styled. This actually happens in one of the most popular themes TwentyEleven.
.entry-content img,
.comment-content img,
.widget img {
max-width: 97.5%; /* Fluid images for posts, comments, and widgets */
}
What this means for Google maps is that map tiles end up looking like is this:
This has been posted about, not a ton but people have had to deal with it. So I have researched this.
http://wordpress.org/support/topic/twenty-eleven-12-breaks-embedded-google-maps
http://wpscale.com/google-street-map-cant-work-in-wordpress-3-2/
Every post I have seen on this subject provides the solution of changing the class styling for the div being used:
.wl_places_place_map_canvas img {
max-width: none;
}
This looks better, it really does. I am not finding a solution that makes it look great though. There are two effects from this solution that are not desirable.
Sometimes on backgrounded tile load the styling override doesn't actually work.
There is still visible 1px tile gapping that actually gaps marker overlays if they happen to be on tile lines.
To deal with the backgrounded style issue I have attempted to use jQuery, and make sure all tiles are loaded prior to setting the style:
google.maps.event.trigger(_instance._map, 'resize');
var listener = google.maps.event.addListener(_instance._map, "tilesloaded", function() {
jQuery('.wl_places_place_map_canvas').find('img').css('max-width','none');
google.maps.event.removeListener(listener);
});
That deals with the first issue, not the second and 1px tile gaps still are visible on the map and overlays.
What I want is a 100% bulletproof way to force style on the map. I have researched the API extensively. What I would really like is a way to set the style on the map itself, hopefully as a URL, and it would ignore and override all external styles. In the best possible world this style would live in Google's CDN and be tested to always look clean and fresh no matter where it was embedded.
Any ideas?
I just added #map img { max-width:none !important; } to the initial map styles. Seems to be working so far.
Everything was working fine for me on WordPress until I added a map inside the HTML field on Gravity Forms. Not sure why it started failing but the above fixed the tile issue.