i'm trying to put a layer on top of my google maps to cover it up. There doesn't have to be any interaction with google maps, it's just one layer on top the other.
what i have now:
<div id="map">
<div id="overlay"></div>
</div>
in the map div i put my google maps, and the overlay layer has a background as big as the map div, but the google maps keeps putting itself on top.
Anyone an idee what i can do about it?
Google Maps API V3 supports an option called noClear:
If true, do not clear the contents of the Map div.
Use it like:
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
noClear: true,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
However, semantically it feels better to put the div#overlay as the next sibling of the map div as #Marcelo suggests.
The API will overwrite anything inside the DIV you assign to the map as container.
To cover the map you'd need to put your overlay div outside the map div with position:absolute
Related
I have a google map. When I click a marker I show a bootstrap modal with style="z-index:999999999999999999999999999". No problems here. However when I click the fullscreen button, the the modal is not shown anymore. It only works in normal mode. Any suggestions how to fix this?
To see a sample see: http://jsfiddle.net/segato/e8w4wmh6/
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function () {
$('#myModal').modal('show');
});
}
google.maps.event.addDomListener(window, 'load', initialize);
Click the marker. Then click the full screen icon and then click a marker.
The point is that fullscreen mode use fullscreen API so anything outside the fullscreen element (in this case the map DIV) remains backward.
A workaround can be to append the modal element to the map div, for example exploiting the custom controls API.
map.controls[google.maps.ControlPosition.TOP_CENTER].push(document.getElementById("myModal"));
See working fiddle.
N.B. I have disable modal background because in the maps it came out with a wrong z position, coming of top of the modal. I think would not be difficult to fix that if you need the background.
The solution proposed did not worked for me but inspired from this page it's OK : Google maps tool tip not working full screen mode
document.getElementById('map_canvas').firstChild.appendChild(document.getElement
ById("modalLarge"));
I have static images of map areas and I need to display them with a clickable marker overlay with multiple dynamic markers on it. The markers have to correspond to specific geo locations. I will know the geo coordinates of the markers, but they will change frequently.
The static images HAVE to be displayed without any of the surrounding areas visible (and- NO zoom, no drag, no pan etc). For example, a map of a state in the USA with NO bordering states and multiple, specifically placed, clickable markers. This makes it impossible to use google maps api as is even with map style customization (at least for the actual map display).
So my question(s) is/are:
Is there a way to do this while still leveraging the google map api marker functionality? Or will I have to rewrite my own version of the marker functionality (click, info box etc)?
Is there a way to load the google map with the markers and then dynamically "swap" the google map with my static one?
Picture this:
(source: nebdev.net)
Where the markers are clickable and positioned based on specific geo codes.
your answers are:
Yes.
Yes.
Disable controls: https://developers.google.com/maps/documentation/javascript/examples/control-disableUI
Stylized map markers: https://developers.google.com/maps/documentation/javascript/examples/icon-complex
Listening to click/DOM events: https://developers.google.com/maps/documentation/javascript/examples/event-domListener
I'm interested in this quesiton. But I'm afraid you cannot make what you want.
At lease, you can try these things with Google Maps:
1. Specify the bounds you need (to match your static image) -- Google API
2. Add markers -- Google API
3. Disable draggable and ScrollWheelZoom -- Google API
4. Add click event on markers -- Google API
5. Replace the map with your static image -- Google API
The problem will be the 1st step, which you can hardly specify the bounds of Google Map as exactly to the area of your static image.
You can specify an area on Google Map though, like area layer , but basically the outer space will still be a rectange(Google Map itself and LatLngBounds)
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>
I'm trying to apply a Google static map as a background for a div element. Is this possible? I'm using the image-background CSS property at the moment.
You can simply save the image by navigating to the URL of your static map and use it as a background like any other image.
.map-div {
background-image:url('static-map.png');
}
The maximum resolution it can be is 640x640, which may or may not be sufficient, however you can use a scale value of 2 to get a 1280x1280 image.
Yes, this is very possible.
You'll need a Google API key and some knowledge of CSS3.
Read more about how to do it and get some sample code here: http://blog.wadehammes.com/post/3837158298
Use this code to disable all controls:
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-33, 151),
disableDefaultUI: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
I'm trying to add the google map with a marker into my form in order to help users choose the location, but it went wrong somewhere.
As you see, the map didn't display correctly in its area. I've put a marker into the map and also set center there, but the location of that marker is not correct, it hides outside the initial map (in the top right of the map above, instead of the center).
When I hit the F12 button to enable Firebug (in firefox), the map display correctly
Here's the code for creating the form and adding google map:
The form in index.html file:
<div id="map_company" style="float: left; width: 500px;height: 350px;">
<label style="margin-bottom: 5px;">Chọn vị trí hãng xe trên bản đồ:</label>
<div id="map_canvas" style="width: 100%; height: 100%; position: relative;"></div>
</div>
And the javascript in the script file:
//add map to company tab
//Set Center
var myOptions =
{
center: new google.maps.LatLng(21.044813, 105.79864),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
var comMarker = new google.maps.Marker({
position: new google.maps.LatLng(21.044813, 105.79864),
map: map,
draggable: true
});
google.maps.event.addListener(comMarker, 'dragend', function {
document.getElementById("cLat").value = this.getPosition().lat();
document.getElementById("cLon").value = this.getPosition().lng();
});
Can anyone help me to figure out the problem here, I even don't know how to explain it to google.
It appears that you use tabs.
When yes, you must trigger the resize-event of the map when the tab with the map has been selected.
Give your map_canvas a fixed size (in pixels, not percentage) and remove the position = relative. If you use percentages the parent node must also have a size, otherwise it make no sense, (100% of what?).
<div id="map_canvas" style="width: 400px; height: 300px;"></div>
Here is the code I'm using to show markers and infoWindows. It's working perfectly.
mapOptions = {
zoom: zoom,
center: getMyCompanyCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($(this)[0], mapOptions)
infowindow = new google.maps.InfoWindow()
createMarker = (company)->
marker = new google.maps.Marker({
position: new google.maps.LatLng(company.latitude, company.longitude),
map: map
})
google.maps.event.addListener(marker, 'click', ()->
infowindow.setContent('content')
infowindow.open(map,this)
)
return marker
firstCompanyMarker = createMarker(companiesData[0])
createMarker(companiesData[i]) for i in [1..companiesData.length-1] by 1
google.maps.event.trigger(firstCompanyMarker, 'click')
However, there is one issue. The infoWindow of the default (firstCompanyMarker) marker is not showing as I need. It's crossing the top edge of the map.
I tried to move the center but there was no result.
lat += 100 #or lat -=100. Anyway it does NOT work
long += 100 # it does work but it's moving the center
#of the map to the left or the right and it's not what I need
mapOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Your ideas? How do I make infoWindow to be shown in the center of the map and to not cross the top edge of it?
Add a the following line after "infowindow.setContent('content')"
map.setCenter(marker.lat-100, marker.lng-100);
However, this is not a real solution. From experience I can tell you that you map is very little for the standard infowindow. You have really 2 options to solve this:
1) Increase the size of the map so the default infowindow will show with the marker in the center of the map or
2) Use a custom infowindow and make it a lot smaller than the default one
Hope that helps!
map.setCenter(marker.lat, marker.lng- (popup.getheight/2));
This should work.
Late answer for the sake of anyone stumbling on this. I had the same problem and noticed that if I closed the infoWindow and clicked the marker, the infoWindow would open and pan to the correct position. Instead of triggering a click, waiting for the tilesloaded event before opening the initial infoWindow was the key.
// Trigger click after tiles are loaded so auto-pan positions infoWindow correctly
google.maps.event.addListenerOnce( map, 'tilesloaded', function () {
infoWindow.open( map, marker );
} );