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>
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>
);
}
The default infoWindow size is way too big for me. I want it to be much smaller can I can't figure out how to do it. I've tried setting a maxWidth parameter on my infoWindow constructor like this
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
and setting the CSS width like this
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
but that only seems to change the size of the text wrapping, not the actual box. How do I change the size of the infoWindow box?
Here is my code.
<!doctype html>
<html lang="en">
<head>
<title>jQuery mobile with Google maps - Google maps jQuery plugin</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<style type="text/css">
#infoWindow {
width: 10px;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3&sensor=false&language=en"> </script>
<script type="text/javascript">
var cityList = [
['Chicago', 41.850033, -87.6500523, 1],
['Illinois', 40.797177,-89.406738, 2]
];
var demoCenter = new google.maps.LatLng(41,-87);
var map;
function initialize()
{
map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 7,
center: demoCenter,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
addMarkers();
}
function addMarkers()
{
var marker, i;
var infowindow = new google.maps.InfoWindow({'maxWidth':'10px'});
for (i = 0; i < cityList.length; i++)
{
marker = new google.maps.Marker({
position: new google.maps.LatLng(cityList[i][1], cityList[i][2]),
map: map,
title: cityList[i][0]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
var contentString = '<div id="infoWindow">'
+'<div id="bodyContent">'
+'<p>'
+ "This location is:<br>"
+ marker.title
+'</p>'
+'</div>'
+ '</div>';
return function() {
infowindow.setContent(contentString);
infowindow.open(map, marker);
}
})(marker, i));
}
}
</script>
</head>
<body onload="initialize()">
<div id="basic-map" data-role="page">
<div data-role="header">
<h1><a data-ajax="false" href="/">jQuery mobile with Google maps v3</a> examples</h1>
<a data-rel="back">Back</a>
</div>
<div data-role="content">
<div class="ui-bar-c ui-corner-all ui-shadow" style="padding:1em;">
<div id="map_canvas" style="height:350px;"></div>
</div>
</div>
</div>
</body>
</html>
The native infoWindow has a minimum size. If it is to big for you, you need to look at using an alternative solution like infoBubble or InfoBox
your CSS section doesn't do anything because var infoWindow is not the same as <div id="infoWindow">
The documentation says:
maxWidth: Maximum width of the infowindow, regardless of content's width. This value is only considered if it is set before a call to
open. To change the maximum width when changing content, call close,
setOptions, and then open.
Also what Larry, (geocodezip), said. (he types faster than me) ;-)
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 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>