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'
});
}
Related
I have a simple map and a marker, when I click on the marker it opens a div, How ever when in full screen the div will not show.
Is there a way for it to show in full screen?
The id of the div is "divbox"
<!DOCTYPE html>
<html>
<head>
<style>
#divbox{
display: none;
}
.mapbox {
height: 100%;
width: 100%;
#map {
height: 100%; /* The height is 400 pixels */
width: 100%; /* The width is the width of the web page */
}
</style>
</head>
<body>
<div class="mapbox">
<div id="map"></div>
<div id="divbox">
You clicked on a marker"
</div>
</div>
<script>
function initMap() {
var uluru = {lat: -25.344, lng: 131.036};
var map = new google.maps.Map(
document.getElementById('map'), {zoom: 4, center: uluru});
var marker = new google.maps.Marker({position: uluru, map: map});
}
google.maps.event.addListener(marker, 'click', function() {document.getElementById('divbox').style.display = "block";});
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
</body>
</html>
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?
i am working on google map api v3. map is perfectly showing on my page... problem is that when i resize the browser, map fit to its original size when i load the page...
initial state when i load the page
when i resize the browser, map is still sized at initial state size.
[Code]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<head>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type='text/javascript'>
var point;
var mrktx;
function mshow()
{
$("#search_content").css("display","");
}
function mhide()
{
$("#search_content").css("display","none");
}
function load() {
if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(ShowPosition)
}
else
{
alert("Browser does not support");
setTimeout( function(){ window.location = "../" },500);
}
function ShowPosition(position)
{
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var cwidth = document.getElementsByTagName("body")[0].clientWidth;
var cheight = document.getElementsByTagName("body")[0].clientHeight;
//alert(cwidth + ',' + cheight);
$("#body").css("overflow","hidden");
$("#map_canvas").css("position","absolute");
$("#map_canvas").css("overflow","auto");
$("#map_canvas").css("height",cheight);
$("#map_canvas").css("width",cwidth);
$("#map_canvas").css("z-index","99")
$("#map_canvas").css("top","0");
$("#map_canvas").css("left","0em");
$("#top_nav").css("width",cwidth);
$("#top_nav").css("height","8%");
var latlng = new google.maps.LatLng(lat,lng);
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$('document').resize(function(){
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
var myMrkrTxt = "";
var infowindow = new google.maps.InfoWindow({ content : myMrkrTxt });
var myMrkr = new google.maps.Marker({position:latlng,map:map});
google.maps.event.addListener(myMrkr,'mouseover', function(){ infowindow.open(map,myMrkrTxt); });
google.maps.event.trigger(map, "resize");
}
}
</script>
<style>
#top_nav
{
position: absolute; z-index: 200; top: 0px; background-color: black;
}
#top_nav h2
{
color: white;
}
body, html {
height: 100%;
width: 100%;
}
</style>
</head>
<body onload='load()'>
<div id="map_canvas"></div>
</body>
</html>
i guess you have to resize your map_canvas as well.
so just add this to your resize()
//its maybe better to attach this handler to the window instead of the document
$(window).resize(function(){
$('#map_canvas').css("height",$(window).height());
$('#map_canvas').css("width",$(window).width());
google.maps.event.trigger(map, 'resize');
map.setZoom( map.getZoom() );
});
so you have track of the resizing of your browserwindow :)
Same things can be done using only CSS too. I'll put an example below, use this if you like.
.google-maps {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.google-maps iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
<div class="google-maps">
<iframe src="https://www.google.com/maps/yourmapsblah" width="765" height="500" frameborder="3" style="border:0" allowfullscreen></iframe>
</div>
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>