i am implementing a Location Picker like this one:
http://m.rhinvivant-lebendigerrhein.eu/geopick.php?raz=1
But when I load the code in my environment the Location Marker is suddenly small and squashed after loading the page (see image1). Then after i dragged the Marker around, it gets even smaller (see image2).
Has anyone seen something like this? It would help to get a hint how i can work around this, or what mistake i made.
i.e. How can i fix the size of my markers?
My code looks like this:
var marker = new google.maps.Marker({
title: settings.gMapMarkerTitle,
map: map,
position: defaultLocationLatLng,
draggable: true
});
The Problem was indeed a CSS setting. I am using the zurb foundation framework, which defines max-width for all images.
max-width: 100%;
Fixed it, by adding my own css class to the map div. It overrides the max-width setting and the Markers are back to normal.
<div id="gmap" class="map_canvas" />
.map_canvas img {
max-width: none; // just in case it does not work... add !important;
}
Thanks Dr. Molle for the Hint...
Works without !important, and !important should not be used if it doesn't need to be.
.map_canvas img {
max-width: none;
}
Related
I have a large image of a map with points of interest on it.
What I want is to have a button on a page of text, when the button is clicked it opens the map image in a different window. What I then need is for the image to only display the relevant portion of the map showing the point of interest mentioned on the original page with the button.
I've found ways to show a certain section of the map using and coordinates, or using the map as a sprite sheet, or using CSS background-postion, but I can't find a way to implement this on clicking the button.
Ideally I'd like to achieve this with just CSS because there are going to be quite a few pages linking to this image.
Here is a small guide of what I'm tring to achieve.
Image showing how this works
<style>
.map-one {
background: url('map.jpg');
background-position: center bottom;
height: 300px;
width: 300px;
}
</style>
<button><a class="map-one" href="map.jpg">Click</a></button>
This is an exmaple of some code I've tried, which is obviously wrong, but I don't know how to apply the css style to the image when clicking on the link.
Well it doesn't work with just pure css, you have to pass some parameters to your new window.
So i will assume that you pass an X and Y coordinate to the new window and you have that available on your new page.
First you need to wrap the "Map" to give it a viewport. If nothing else is on the page you can theoretically use body:
<div id="mapviewport">
<div id="map">
</div>
</div>
So if you want the user to be able to explore the map you can use overflow: auto on the viewport, otherwise use overflow: hidden.
The map container gets the width/height of the map. The map is provided via background-image on the map-container.
Now to scroll to the right position, use .scrollTop and .scrollLeft on the mapViewport to scroll the map to the right spot.
You will need to calibrate the values until you have achieved the exact area you want, but the code will be pretty much like this:
Main page
<a href="map.html" target="_blank"><button> <!-- Map page path -->
CLICK ME!
</button></a>
Map page
<style>
div.map {
background-image: url('map.png'); /* image file path */
background-position: 70px 90px; /* image position */
width: 200px; /* image size */
height: 200px;
}
</style>
<div class="map"></div>
I´m working with a MapBox map and I have the following problem:
On mobile the map doesn´t fill all the page because I need to show other things after it.
I´m using map.dragging.disable(); and this prevents dragging the map as expected, but also scroll it. So, how can I disable that dragging event without blocking the normal scroll behavior? I need to be able to scroll as is the map were an image, but I don´t want to do this.
I have also seen this but it didn't help me.
I don't know if this will help but covering mapbox manually with overlay does work.
<!-- Wrapper -->
<div style="position: relative;">
<!-- Mapbox object -->
<div id="mapbox"></div>
<!-- Overlay -->
<div style="height: 200px; position: absolute; top: 0; width: 100%;"></div>
</div>
Additionally you toggle the overlay display from block to none in order to make the maps draggable again.
I'm experiencing this issue as well. Out of curiousity, what version of mapbox were you using? I don't remember this being an issue in past versions. I'm on v2.2.1.
I'm using Modernizr on my site and the solution that I implemented was to apply a z-index: -1 property to the map container when the .touchevents class is present. This way you don't need to add uneccesary markup to your page.
HTML
<div id="map"></div>
CSS
.touchevents #map {
position: relative;
z-index: -1;
}
If you're not using Modernizr I would encourage you to but if you can't for whatever reason you could just apply the z-index on smaller browser widths with media queries. Less desirable but better than nothing.
I have a DIV with a background-attachment: fixed and another DIV further down the page with position:fixed. This is working fine in IE11 and Firefox 31.0 but in in Chrome the div with background-attachment: fixed is scrolling the image with the DIV and has large black blocks across the image's full width, sometimes covering half the image, sometimes in thick bars (like a zebra if you will)
If I don't run the google map JS, or have background-attachment: scroll, or have position: static, then all works as you would expect.
Am I doing something wrong, is this a bug in Chrome? either way I need to find a way to make it behave as intended (fixed background image and fixed google maps div to window) - so either a correction of my code, or a workaround for a 'bug' would be really helpful.
(aside: I also have a fixed DIV at the top for a nav bar but it isn't affecting the issue. I believe this is because it does not stack with the google map)
code in full: http://jsfiddle.net/chowie/rodx0v02/3/
HTML:
<div id="hobbiescontainer" class="sectioncontainer">
<section id="hobbiesSection">
<a id="hobbies"><h4>Hobbies</h4></a>
<p class="keytext">
text content here
</p>
</section>
</div>
<div id="mapcontainer">
<div id="map"></div>
</div>
<div id="mapspace"></div>
CSS:
section {
position: relative;
z-index: 2;
overflow:auto;
padding: 0px;
}
JS:
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(51.5028397, -0.2521218),
zoom: 15
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(51.5028397, -0.2521218),
map: map,
icon: image,
});
}
Google maps ads an inline style of transform: translateZ(0px); to your map container via javascript (which as far as I can tell does nothing whatsoever). Overriding it with transform: inherit !important; in my stylesheet fixed this for me.
I use the Google Maps API (v.3) to show a map with a couple of markers. I recently noticed that the control used to zoom the map is messed up (it wasn't always like this). I have no idea what the cause is.
Update
This post originally had a link to a page where you could view the issue, but the link is broken now, so I've removed it.
Your CSS messed it up. Remove max-width: 100%; in line 814 and zoom controls will look fine again. To avoid such bugs use more specific selectors in your CSS.
#myMap_canvas img {
max-width: none;
}
fixed it for me, but I also wanted to point out the comment on the question by #Ben, "This issue doesn't happen with Bootstrap if you use the is map_canvas as the map div id". He's right. I'm not using Bootstrap, but the problem started happening after I changed the div id.
Setting it back to map_canvas fixed it without the max-width change.
<div id="map_canvas"></div>
If you're using Bootstrap, just give it "google-maps" class. This worked for me.
As an alternative you might reset everything for the google map div as a kind of last-resort solution:
HTML:
<div class="mappins-map"><div>
CSS:
.mappins-map img {
max-width: none !important;
height: auto !important;
background: none !important;
border: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
Just share #Max-Favilli answer:
With latest version of google maps api you need this:
<style>
.gm-style img { max-width: none; }
.gm-style label { width: auto; display: inline; }
</style>
Thanks to #Max-Favilli
https://stackoverflow.com/a/19339767/3070027
If you're a Twitter Bootstrap user you should add this line to your CSS:
.gmnoprint img { max-width: none; }
I had this problem as well and using
.google-maps img {
max-width: none;
}
didn't work. I eventually used
.google-maps img {
max-width: none !important;
}
and it worked like a charm.
If you're using Yahoo's Pure CSS, give your div the "google-maps" class like Bootstrap, and put this rule in your CSS:
.google-maps img {
max-width: none;
max-height: none;
}
As far as I can tell, Pure CSS has no way of fixing this issue on its own.
Those options you guys told me didn´t work for my website.
I use Bootstrap V3 and focussed on the functionality. The main reason was that i had given my map a different ID then the CSS file used to display the zoom bar with the yellow streetvieuw guy
I renamed map_canvas to mapholder and then it worked for me! Thanks anyways for the hints that i should look into the CSS files!
I tried all the above solutions, and others from other forums to no avail. it was really annoying because I have another non-Wordpress site where the code worked perfectly. (I was trying to display a Google map in a Wordpress page, but the zoom and Streetview controls were distorted).
The solution I did was to create a new html file (copy paste all the code into Notepad and name it xyz.html, save as type "all files"). Then upload/ftp it up to website, and setup a new Wordpress page and use an embed function. When editing the page go to the text editor (not the visual editor) and copy/type:
http://page URL width="900" height="950">
If you change the dimensions, remember to change it in both arguments above, or you get weird results.
There we go - might not be as clever as some other answers, but it worked for me! Evidence here: http://a-bc.co.uk/latitude-longitude-finder/
I have a present need to display a Google Map, inside a FancyBox. The tutorial shows how to do this in a straight-forward manner by using a "fancybox.iframe" CSS class, But I'll need my FancyBox to display more than just the map, ie. a form below.
So far, here's my code(very simple):
HTML
<div id="fancybox-container"></div>
CSS
#fancybox-container {
display: none;
width: 450px;
height: 500px;
border: 1px solid red;
padding: 3px;
overflow: hidden;
}
and finally some CoffeeScript:
$ ->
new FancyMap()
class FancyMap
constructor: ->
#openMap() #once fancybox is open proceed to render the map inside of it
options =
center: new google.maps.LatLng(6.191556, -75.579716)
zoom: 14
mapTypeId: google.maps.MapTypeId.ROADMAP
#map = new google.maps.Map $('#fancybox-container')[0], options
openMap: ->
$('a[href=#fancybox-container]').fancybox
maxWidth: 500
maxHeight: 550
fitToView: false
autoSize: true
closeClick: false
openEffect: 'none'
closeEffect: 'none'
window.FancyMap = FancyMap
The result of that, is almost what I want except that the rendering is messed up,
If I Drag the map inside, the result is.. something like this:
so, in conclusion, I'm certainly missing an important property or configuration, right? Can you help me solve this issue?
Infinite Thanks in advance,
Note. I have read and tried the similar Questions here, but I'm still unsuccessful. So I reduced my issue here to its simplest version.
Google Maps does this when it doesn't know how big its eventually going to be, for example if you assign it to the light box before opening it the map wont know what size it needs to be.
Rather than adding the map in the constructor try adding it to the callback which will fire when the box has opened.
Code example provided by "mu is too short"
http://goo.gl/t7SOm
You can also trigger the resize event on the Map to get the Maps API to resize the map container.