I'm inserting a very basic Google map into my page and the zoom control and streetmap icon are not visible, however if I place my mouse over where they should be I can zoom the map and enter streetview.
So the controls are there just not visible.
<script type="text/javascript"
src="//maps.googleapis.com/maps/api/js?key=<apikey>&sensor=false®ion=IT">
</script>
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
Any ideas what the problem could be?
That is definitely a CSS issue that you have with your code. Look for CSS that is applying to all images like:
img {
max-width: 100%;
}
I had this problem, the fix was to include this CSS ...
.gmnoprint img { max-width: none; }
The CSS selector .gmnoprint img gets to all images [img] on the Google Map [gm] controls that are non printing [noprint]. In my case max-width had been set globally to 100%. Unsetting this fixed the issue.
Best solution to reach only for google map
.gmnoprint img {
max-width: none;
}
I had a very similar issue and it turned out in my case NOT to be a CSS issue. In my case, the Content-Security-Policy header on our site was blocking certain images from being rendered. In this case it was blocking the street view images (loaded from a *.ggpht.com uri) and the button icons which use inline svg data specified using the data: scheme. To fix this, I added the following to the Content-Security-Policy header:
img-src data: 'self' https://*.googleapis.com https://*.google.com https://*.gstatic.com https://*.ggpht.com
Note that on the moment it's not even possible to show the full size zoom slider on touch devices (ipad etc). Here's the documentation:
http://code.google.com/apis/maps/documentation/javascript/controls.html
google.maps.ZoomControlStyle.SMALL displays a mini-zoom control, consisting of only + and - buttons. This style is appropriate for small maps. On touch devices, this control displays as + and - buttons that are responsive to touch events.
google.maps.ZoomControlStyle.LARGE displays the standard zoom slider control. On touch devices, this control displays as + and - buttons that are responsive to touch events.
I ran into a variant, with the offending css looking like:
img {
max-width: 100%;
max-height: 100%;
}
So, an additional line is needed:
#map_div img {
max-width: none !important;
max-height: none !important;
}
I'm thinking this might be a problem with the browser or the code within the page that you're embedding this map.
If I look at this simple hello world code, the maps controls show up fine. I geocoded this map to the same location as your sample, so its not anything to do with the location.
What happens when you use this sample?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&sensor=true®ion=it">
</script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(45.38686, 8.91927);
var myOptions = {
zoom: 17,
center: latlng,
panControl: true,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE
},
scaleControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
Related
Below is code i use for dispaying Google map.
I have a problem if someone resize window to size in this case bellow 1095px.
In this case zooming with mouse wheel is posible only if ctrl button is pressed.
Is there a way to keep html min-with:1150px and disable this feature of asking for ctrl.
option gestureHandling: 'greedy' is familiar but would like to solve this other way if possible.
Thanks!
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
width: 100%;
height: 100%;
position: fixed !important;
left: 0;
z-index: 2;
top: 0;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
min-width:1150px;
width: auto;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
async defer></script>
</body>
</html>
Add gestureHandling: 'greedy' to your map variables. So it will look like this:
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8,
gestureHandling: 'greedy'
});
}
I want to get Google Maps to show up in browser at full screen using reactjs.
My CSS:
html, body, #map_canvas { height: 100%; margin: 0; padding: 0; width:100%; height:100%;}
My component is defined as follows:
class GMap extends React.Component {
render() {
return (<div className="GMap">
<div ref="map_canvas" id="map_canvas">
</div>
</div>)
}
componentDidMount() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map_canvas = ReactDOM.findDOMNode(this.refs.map_canvas);
this.map = new google.maps.Map(map_canvas,
mapOptions);
}
}
My problem is that nothing shows up. If I specify in the CSS a width:500px and height:500px or some arbitrary value, I can see it, but if I don't, I don't see anything. I want to replicate this in React:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map_canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
Also, on this line: <div ref="map_canvas" id="map_canvas"> Am I being redundant with ref and id?
I am using ES6, but am open to JSX solutions. I do not want to use any existing "react-google-map-library" for reasons that I want to simply use the existing library.
The problem is that you are setting #map_canvas to be 100% width and height of its parent, GMap which doesn't have a height or width defined as far as I can see.
If you create a fullscreen class, then you can just use it on both elements.
.fullscreen {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
/* extra fullscreen guarantees - you might not need the rest */
position: absolute;
top: 0;
left: 0;
}
You can also remove the redundant id and switch to the more updated version of the ref syntax.
createMap(element) {
var mapOptions = {
center: { lat: -34.397, lng: 150.644},
zoom: 8
};
this.map = new google.maps.Map(element, mapOptions);
}
render() {
return (
<div className="fullscreen GMap">
<div ref={this.createMap} className="fullscreen"></div>
</div>
);
}
In response to your other question — yeah, you can change this stuff conditionally in your render function. In fact, you don't need CSS at all.
render() {
const styles = {
width: window.innerWidth,
height: window.innerHeight
};
// you could also optionally use an alternate css class here.
return (
<div className="GMap">
<div ref={this.createMap} style={styles}></div>
</div>
);
}
I am using Google Maps Javascript API ver3 to display the world locations. Below is the sample code I am using:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
function addMarkers(location,locationDetail,map){
var color = "#000000"
if(locationDetail[1]=="A"){
color = "#FF0000";
scl = 3;
}
else if(locationDetail[1]=="B"){
color = "#0000FF"
scl = 4;
}
else if(locationDetail[1]=="C"){
color = "#00FF00"
scl = 5;
}
var marker = new google.maps.Marker({
position: location,
title: locationDetail[0],
icon: {
path: google.maps.SymbolPath.CIRCLE,
scale: scl,
fillColor: color,
fillOpacity:1,
strokeWeight:1
}
});
// To add the marker to the map, call setMap();
marker.setMap(map);
}
function initialize() {
//Marking Latitude and Longitude
var myLatlng = [
new google.maps.LatLng(24.466667,54.366667),
new google.maps.LatLng(-34.4,-58.24),
new google.maps.LatLng(-33.8641,151.0823)
];
var myLatlngDet = [
["Abu Dhabi","A"],
["Buenos Aires","B"],
["HOMEBUSH","C"]
];
//Map Options to customize map
var mapOptions = {
zoom:2,
center: new google.maps.LatLng(40,0),
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapMaker: true,
minZoom : 2,
scrollwheel: false,
mapTypeControl:true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
},
scaleControl:true,
scaleControlOptions: {
position: google.maps.ControlPosition.TOP_LEFT
},
streetViewControl:true,
streetViewControlOptions: {
position: google.maps.ControlPosition.LEFT_TOP
},
overviewMapControl:false,
zoomControl:true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.LARGE,
position: google.maps.ControlPosition.LEFT_CENTER
},
panControl:true,
panControlOptions: {
position: google.maps.ControlPosition.TOP_RIGHT
}
};
//Generating map in the div
var map = new google.maps.Map(document.getElementById("map_canvas"),mapOptions);
for(i=0; i < myLatlng.length; i++){
addMarkers(myLatlng[i],myLatlngDet[i],map);
}
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="height: 100%; width: 80%;">
</div>
</body>
</html>
The Problem is - Sometimes the markers get displayed properly but sometimes I get a javascript error as follows:
'Unexpected Call to Method or Property access'
main.js
Can you help me identifying the cause of the problem.
I am using IE8.
Thanks in advance
My guess is that it's the body's onload that is not waiting until googlemap's script is loaded. In theory the body can be loaded faster than the googlemap script (relevant discussion). Try putting
window.onload=initialize;
at the bottom of your script instead of using the body's onload and see if this solves your problem. I have a hard time reproducing this.
Update
You should simply wait until googlemap has loaded which follows after the window load. Have a look at this question: How can I check whether Google Maps is fully loaded?
My application will not recognize my KML file. The application will go to the correct location (lat/long) and zoom level, but will not recognize the KML file location. I have attempted to use two different servers to check the problem, so I believe it is the code that is the problem.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDOJCBv2WGJRJ7uxOyAMehKAMiAKXkkHFU&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(44.88119,-93.314798),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var nyLayer = new google.maps.KmlLayer('http://webgis.uwm.edu/engelki7/KMLFiles/Richfield_Homes2.kml',{suppressInfoWindows: true});
google.maps.event.addListener(nyLayer, 'click', function(kmlEvent) {
var text = kmlEvent.featureData.description;
showInDiv(text);
});
}
function showInDiv(text) {
var sidediv = document.getElementById('content_window');
sidediv.innerHTML = text;
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:79%; height:100%; float:left"></div>
<div id="content_window" style="width:19%; height:100%; float:left"></div>
</body>
</html>
Your kml file does not exist.
http://webgis.uwm.edu/engelki7/KMLFiles/Richfield_Homes2.kml
Gives me: HTTP Error 404 - File or directory not found
If you believe it is there (the path on the server is correct), then it is possible that the server doesn't know how to deal with kml/kmz files. See this portion of the documentation on kml files.
I have a fullscreen google maps web page similar to this http://wadehammes.com/dewey-beach/, now how can I grey down the whole area (map) except for a rectangle div-container?
I want to create the cool effect of looking the map "through a window", where the "window" is a div-rectangle, and also be able to interact with the map only on the area inside the rectangle (div-container).
I imagine CSS should do that, am I wrong? Any idea how to do that?
I hope I expressed well myself
Thanks
The idea is that you will need two maps, because Google doesn't let you apply a style to "just a part" of the map. So you'll have two versions: black & white, and color map. Then with CSS you hack the position one inside the other, and with JS you add support for user dragging. If you need to add extra things such as markers, or click actions, just remember to bind those events to both created maps: map & other. Check the demo I've created.
I've created this little demo in 10 mins, just copy-paste and it will work. The code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Map Loop</title>
<!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<style>
#map-container{
height:400px; /* map height */
position:relative;
width:500px; /* map width */
}
#map-canvas{
height:400px; /* map height */
position:absolute;top:0;left:0;
width:500px; /* map width */
}
.loop{
height:200px;
overflow:hidden;
position:absolute;top:100px;left:150px; /* offset in map view */
width:200px;
}
#map-canvas2{
height:400px; /* map height */
margin:-100px 0 0 -150px; /* opposite to top and left in .loop */
width:500px; /* map width */
}
</style>
</head>
<body>
<div id="map-container">
<div id="map-canvas"></div>
<div class="loop">
<div id="map-canvas2"></div>
</div>
</div>
<script type="text/javascript">
function initialize() {
// 2 = color
// 1 = b&w
var mapDiv = $('#map-canvas2')[0];
var map = new google.maps.Map(mapDiv, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
disableDefaultUI: true, /* we dont need UI in the loop */
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var other = $('#map-canvas')[0];
var map2 = new google.maps.Map(other, {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [{
stylers: [{ saturation: -100 }]
}]
});
// flag to prevent buggy behavior
var BLACK_WHITE_MAP = false;
google.maps.event.addListener(map, 'mousedown', function() {
BLACK_WHITE_MAP = false;
});
google.maps.event.addListener(map2, 'mousedown', function() {
BLACK_WHITE_MAP = true;
});
google.maps.event.addListener(map, 'bounds_changed', function() {
!BLACK_WHITE_MAP && map2.setCenter(this.getCenter());
});
google.maps.event.addListener(map2, 'bounds_changed', function() {
BLACK_WHITE_MAP && map.setCenter(this.getCenter());
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</body>
</html>