Position relative in firefox causing problems with google-map-markers clickable area
Try changing the js src from v=3.exp to v=3
My Google JavaScript Map will appear different depending on the browser and sometimes the computer
Your map has no center set. Note that this is a required parameter, but you never assign the value of center = bounds.getCenter() to your map instance. Try adding the code below:
const center = bounds.getCenter();
map.setCenter(center);
In addition, your map has a zoom level of 2. Change it to e.g. 8 if you don't want your map to appear all far away.
var mapOptions = {
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 8
};
Take a look at this jsfiddle for demonstration and guidance. It works regardless of browser.
Hope this helps you.
Google Maps Display:None Problem
This problems also happens with the jquery tabs, instead of applying "display:none", you can try hidding the map in this way:
Add the following styles when you are trying to hide the map, instead of using display:none
position: absolute;
left: -100%;
You can also add transitions like: transition: left 1s ease;
You can try with google event listener triggering it after you display the map:
<script type="text/javascript">
var map; //I placed here the map variable so other functions can see it.
var latlng = new google.maps.LatLng(-27.999673,153.42855);
// in order to center again the map...
function initialize() {
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var contentString = 'blah';
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script type="text/javascript">
function toggleDiv1(viewmap){
if(document.getElementById(viewmap).style.display == 'block'){
document.getElementById(viewmap).style.display = 'none';
}else{
document.getElementById(viewmap).style.display = 'block';
//here is where your map is being displayed again, try here
// to trigger the resize event.
google.maps.event.trigger(map, 'resize');
map.setCenter(latlng);
}
}
function toggleDiv2(hidemap){
if(document.getElementById(hidemap).style.display == 'none'){
document.getElementById(hidemap).style.display = 'block';
}else{
document.getElementById(hidemap).style.display = 'none';
}
}
</script>
Trying to deploy static, custom map with clickable markers
Ok, I think I got it to work. The concept is pretty simple:
Create a non-Google Map overlay OVER the map area to hide the gmap as it's loading. I had to do this because otherwise, the marker wouldn't load correctly.
Once the map and marker(s) are loaded, remove all images from inside the map element.
Set the background image of the map element to our custom map
Remove the overlay that was obscuring the map area.
Demo: http://web2.nebdev.net/tasks/sandbox/t1234.html
Here is the code (it may explain things better than I am):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple markers</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
//$('#map-canvas').hide();
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
disableDefaultUI: true,
draggable: false,
disableDoubleClickZoom: true,
keyboardShortcuts: false,
mapTypeControl: false,
noClear: true,
overviewMapControl: false,
panControl: false,
rotateControl: false,
scaleControl: false,
scrollwheel: false,
streetViewControl: false,
zoomControl: false
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
google.maps.event.addDomListener(marker,'click',function() {alert('Click')});
//google.maps.event.addDomListener(marker,'mouseover',function() {alert('Mouseover')});
google.maps.event.addDomListener(map,'idle',removeMaps);
}
function removeMaps() {
window.setTimeout(function(){
$('img','#map-canvas').remove();
$('.gm-style-cc,.gmnoprint .gm-style-cc,.gmnoprint').remove()
$('#map-canvas').show();
$('#map-canvas').attr('style','background:url(http://web2.nebdev.net/tasks/sandbox/untitled4.png) no-repeat top left transparent');
$('#map-canvas-overlay').hide();
console.log(marker.getVisible());
},1000);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width:400px;height:400px;"></div>
<div id="map-canvas-overlay" style="width:400px;height:400px;background:url() #CCC;position:absolute;top:0px;left:0px;z-index:10000">Loading...</div>
</body>
</html>
Google Maps not showing
html, body should be height:100%;.
But keep in mind, if your map holder element is a child of another element then that element should also have height:100%;
Otherwise, setting just the html and body won't do you any good.
An Example to explain my point:
<html>
<head>
<style>
html, body { height:100%; }
</style>
</head>
<body>
<div id="wrapper">
<div id="google-map-holder" style="width:100%; height:100%;"></div>
</div>
</body>
</html>
So, if you're doing something like the above. The height:100%; won't work here.
To make this work, you have to do the same thing with all of the parents that the #google-map-holder is a child of, in this case we would add height:100%; to #wrapper element.
IF, the #google-map-holder element was directly outside the #wrapper element and a child of the body directly then just doing html, body would be enough.
User's current location marker only clickable (or visible) if it is within a defined rectangle
I'm going to assume it's Google Maps Javascript API Version 3.
If a marker is not visible, it can't be clicked, so you can fulfil both of your criteria by only adding the marker to the map if it's valid.
First, define your area:
var sw = new google.maps.LatLng(...,...); // SW corner
var ne = new google.maps.LatLng(...,...); // NE corner
var bounds = new google.maps.LatLngBounds(sw,ne);
Then define your marker position:
var mloc = new google.maps.LatLng(...,...);
Then see if it should be added to the map:
if (bounds.Contains(mloc)) { addMarker(mloc) }
Note that addMarker() is a function which you need to write, it's not part of the API.
google map mouseevent in firefox shows incorrect coordinates
Solution:
Add parameter v=3 once calling the google maps api. The fiddle provided by user4974882 is calling 3.exp - doesn't work.
Works:
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
Live example
Doesn't work correctly:
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
Live example
(both fiddles from user4974882)
Background:
The problem occured with Firefox Version 39. The Mozilla-team implemented some new functionality regarding offsetX/Y (https bugzilla.mozilla.org/show_bug.cgi?id=69787). Unfortunately the Google Maps API already somehow plays around with that (https code.google.com/p/gmaps-api-issues/issues/detail?id=8278) and so - once FF39 was rolled out - the problem popped up.
Google maps streetview tiles do not load in Firefox initially, only after dragging
I got it resolved.
It started to work when I added initial position to the street view when creating it for the first time.
See fixed code in fiddle:
http://jsfiddle.net/wK5Hq/23/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Google maps streeview issue - jsFiddle demo</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<link rel="stylesheet" type="text/css" href="/css/normalize.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type='text/javascript' src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.0/bootstrap.min.js"></script>
<script type='text/javascript' src="http://maps.google.com/maps/api/js?v=3.11&sensor=false&foo=.js"></script>
<style type='text/css'>
@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}
.map-canvas img {
border: none !important;
max-width: none !important;
}
.panorama-activated-map-canvas {
width: 50%;
float:left;
-webkit-border-top-left-radius: 6px;
-moz-border-top-left-radius: 6px;
border-top-left-radius: 6px;
-webkit-border-bottom-left-radius: 6px;
-moz-border-bottom-left-radius: 6px;
border-bottom-left-radius: 6px;
}
.panorama-activated-panorama-canvas {
width: 50%;
float:left;
-webkit-border-top-right-radius: 6px;
-moz-border-top-right-radius: 6px;
border-top-right-radius: 6px;
-webkit-border-bottom-right-radius: 6px;
-moz-border-bottom-right-radius: 6px;
border-bottom-right-radius: 6px;
}
.panorama-disabled-map-canvas {
width: 100%;
border-radius: 6px 6px 6px 6px;
}
.panorama-disabled-panorama-canvas {
display: none;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
var data = "{success:true, data:{\"schoolMarker\":{\"lat\":62.759379214514,\"lng\":22.840391666132},\"polylines\":[{\"path\":[{\"lat\":62.768091219265,\"lng\":22.841507465082},{\"lat\":62.767678823231,\"lng\":22.841421634393},{\"lat\":62.767168229676,\"lng\":22.841292888361},{\"lat\":62.766569252889,\"lng\":22.840928107935},{\"lat\":62.765842608979,\"lng\":22.840456039148},{\"lat\":62.76528288457,\"lng\":22.839919597345},{\"lat\":62.764772249527,\"lng\":22.839576274591},{\"lat\":62.764340166815,\"lng\":22.839533359247},{\"lat\":62.764016100627,\"lng\":22.839490443903},{\"lat\":62.763623288351,\"lng\":22.839554816919},{\"lat\":62.762660876165,\"lng\":22.839919597345},{\"lat\":62.761885031233,\"lng\":22.840220004755},{\"lat\":62.761020774875,\"lng\":22.840498954492},{\"lat\":62.760303815724,\"lng\":22.840820819574},{\"lat\":62.759655591079,\"lng\":22.841035396295},{\"lat\":62.759439513032,\"lng\":22.840541869836}]}]}}";
var map = null;
var schoolmarker = null;
var polyBounds = null;
var panorama = null;
var streetViewService = null;
var g = google.maps;
var response = eval( "(" + data + ")" );
if (response.success) {
initMap('#map_canvas', '#panorama_canvas', response.data);
}
function initMap(mapSelector, panoramaSelector, data) {
var mapOptions = {
scrollwheel: false,
zoom: 5,
minZoom: 5,
streetViewControl: false,
mapTypeControl: false,
mapTypeControlOptions: {
mapTypeIds: [g.MapTypeId.ROADMAP, g.MapTypeId.SATELLITE]
},
center: new g.LatLng(65.567, 25.303),
mapTypeId: g.MapTypeId.ROADMAP,
draggableCursor: 'auto',
draggingCursor: 'move',
disableDoubleClickZoom: true,
scaleControl: true
};
map = new g.Map($(mapSelector).get(0), mapOptions);
mapSelector = null;
mapOptions = null;
schoolmarker = new google.maps.Marker({
animation: g.Animation.DROP,
draggable: true,
icon: 'http://www.mapsmarker.com/wp-content/uploads/leaflet-maps-marker-icons/dancinghall.png',
map: map,
position: new g.LatLng(data.schoolMarker.lat, data.schoolMarker.lng)
});
polyBounds = new g.LatLngBounds();
$.each(data.polylines, function(index, polyline) {
var path = [];
$.each(polyline.path, function(index, position) {
var point = new g.LatLng(position.lat, position.lng);
polyBounds.extend(point);
path.push(point);
});
var polyLineObj = new g.Polyline({
strokeColor: "#00BA03",
strokeOpacity: 0.8,
strokeWeight: 4,
path: path,
clickable: false
});
polyLineObj.setMap(map);
});
map.fitBounds(polyBounds);
map.setCenter(schoolmarker.getPosition());
streetViewService = new g.StreetViewService();
streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) {
if (status == google.maps.StreetViewStatus.OK) {
var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition());
var panoOptions = {
position: panoramaData.location.latLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: g.ZoomControlStyle.SMALL
},
pov: {
heading: heading,
pitch: 10,
zoom: 2
},
enableCloseButton: false,
visible:false
};
panorama = new google.maps.StreetViewPanorama($(panoramaSelector).get(0), panoOptions);
}
});
map.setStreetView(panorama);
}
$('#thebutton').click(function () {
$('#map_canvas').removeClass('panorama-disabled-map-canvas').addClass('panorama-activated-map-canvas');
$('#panorama_canvas').removeClass('panorama-disabled-panorama-canvas').addClass('panorama-activated-panorama-canvas');
g.event.trigger(map, 'resize');
map.fitBounds(polyBounds);
map.setCenter(schoolmarker.getPosition());
streetViewService.getPanoramaByLocation(schoolmarker.getPosition(), 50, function(panoramaData, status) {
if (status == google.maps.StreetViewStatus.OK) {
var heading = g.geometry.spherical.computeHeading(panoramaData.location.latLng, schoolmarker.getPosition());
var panoOptions = {
position: panoramaData.location.latLng,
addressControl: false,
linksControl: false,
panControl: false,
zoomControlOptions: {
style: g.ZoomControlStyle.SMALL
},
pov: {
heading: heading,
pitch: 10,
zoom: 2
},
enableCloseButton: false,
visible:true
};
panorama.setOptions(panoOptions);
g.event.trigger(panorama, 'resize');
}
});
});
});//]]>
</script>
</head>
<body>
<div class="container">
<div class="container" id="infocontainer" style=""><a href="#" class="btn btn-primary" id="thebutton" onclick="return false;">Click here</a></div>
<div id="mapcontainer" class="container" style="position: relative">
<div class="container hero-unit" style="padding:0;">
<div class="map-canvas panorama-disabled-map-canvas" id="map_canvas" style="height: 480px;"></div>
<div class="map-canvas panorama-disabled-panorama-canvas" id="panorama_canvas" style="height: 480px;"></div>
</div>
</div>
<div id="bottomcontainer" style="">
</div>
<div id="log"></div>
</div>
</body>
</html>
Google Maps JS v3: Map display: none; after map initialization causing corrupted map
google.maps.event.addListenerOnce(map, 'idle', function() {
$('#addstop').css({
display: 'none',
left: '0',
top: '0'
});
});
This event happens only once after the map is fully loaded and 'idle'
Related Topics
How to Style The Input Type "Time"
Canvas Distorts Drawing. How to Get The Scale Factor Between The Set Size and The Styled Size
Very Different Font Sizes Across Browsers
iOS 10.3 Safari Text-Align:Justify Bug for Persian/Arabic Content
Can Not Scroll <Body> While Fullscreen Is Enabled in Ms Ie11
Svg Pattern and Gradient Together
Onmouseout Event Not Triggered When Moving Mouse Fast (Gwt - All Browsers)
Simple Two Column HTML Layout Without Using Tables
Distributing Images Evenly & Horizontally in a Div via CSS
Div Scrollbar - Any Way to Style It
Displaying an Element Similar to P Inside a Span
Force Div Element to Stay in Same Place, When Page Is Scrolled
Using 'Box-Sizing: Border-Box' with 'Inline-Block' Elements
Using @Font-Face CSS Stylewith an Arabic Font
CSS: How to Make Left Float Div to Adjust Height Dynamically