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>
Related
In Google Maps API,
when listening to click events from the Map object,
the event will not be fired when a Polygon, Circle, Rectangle is clicked.
How to bubble up the click event to the Map object?
const circle = new google.maps.Circle({
center,
radius,
map,
});
// This event will not fire when clicking the circle
map.addListener("click", (e) => {
console.log('map click');
})
Example: https://jsfiddle.net/rphsf32e/14/
Clicking on the map will add a marker. However, if the click is over the circle, the click event will not fire from the map. Only from the circle.
Simplest solution is to make the Circle (and Polygon/Rectangle) "unclickable", set the property: clickable: false in the constructor:
const circle = new google.maps.Circle({
center: myLatlng,
radius: 100000,
map,
clickable: false
})
proof of concept fiddle
code snippet:
function initMap() {
const myLatlng = { lat: -25.363, lng: 131.044 };
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: myLatlng,
});
const circle = new google.maps.Circle({
center: myLatlng,
radius: 100000,
map,
clickable: false
})
circle.addListener("click", (e) => {
alert('inside circle');
console.log(e)
});
map.addListener("click", (e) => {
new google.maps.Marker({
position: e.latLng,
map,
title: `${ e.latLng.lat() }, ${ e.latLng.lng() }`,
});
})
}
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
<!DOCTYPE html>
<html>
<head>
<title>Simple Click Events</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
<!-- jsFiddle will insert css and js -->
</head>
<body>
<div id="map"></div>
<!-- Async script executes immediately and must be after any DOM elements used in callback. -->
<script
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap"
async
></script>
</body>
</html>
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 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?
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'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>