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"));
Related
I am using Mapbox GL JS, embedding a map into Wordpress, via plug-in Page Builder-Custom HTML.
HTML
<div id='map'></div>
<script>
mapboxgl.accessToken = '*******';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
center: [144.9509223,-37.8253897], // starting position [lng, lat]
zoom: 9 // starting zoom
});
</script>
CSS
#map { position:static; }
However, the logo always goes out of the grid. Mapbox and 'i' button actually spread full page width. I reckon there is a mapbox css I need to deeply reach to.
I can't use mapbox plugin, as the map will have javascript for user interaction. Any suggestions, please? Thanks.
changed to Google Maps, now works like a charm...
I have added custom controller to google map api.
one div in the custom controller should be clickable.
I have added cursor:pointer as the style.
It works well in firefox but not in chrome.
In chrome browser, it displays the hand icon but click action
is not working.
This is the code I added to my html file for add the html to the custom controller.
controlText.innerHTML = '<div id="newid" class="myclass" style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>';
I have added to the click event listner as following.
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].clear();
var inputfieldControlDiv = document.createElement('div');
var inputfieldControl = new TextfieldControl(inputfieldControlDiv, map);
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(inputfieldControlDiv);
css file
.myclass{
cursor:pointer;
}
Tested it in Mozzila, Opera, IE11, Chrome and it works (it always shows the cursors specified in your class)
Here is the fiddle: https://jsfiddle.net/eugensunic/kphe5fbL/10/
I've included the following code of yours: controlText.innerHTML = '<div id="newid" class="myclass" style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>'; and the clearing as well altought I believe they are not necessary.
Here is the full code JS that is in the fiddle:
var map;
var london = new google.maps.LatLng(51.508742, -0.120850);
function TextfieldControl(controlDiv, map) {
var controlUI = document.createElement('div');
controlDiv.appendChild(controlUI);
var controlText = document.createElement('div');
controlText.innerHTML = '<div id="newid" class="myclass" onclick="alert()"style="width:380px; margin-left:40px; margin-bottom:20px;">Click here to proceed</div></div>';
controlUI.appendChild(controlText);
}
function initialize() {
var mapDiv = document.getElementById('googleMap');
var myOptions = {
zoom: 12,
center: london,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(mapDiv, myOptions);
var homeControlDiv = document.createElement('div');
var homeControl = new TextfieldControl(homeControlDiv, map);
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].clear();
map.controls[google.maps.ControlPosition.BOTTOM_RIGHT].clear();
map.controls[google.maps.ControlPosition.BOTTOM_LEFT].push(homeControlDiv);
}
google.maps.event.addDomListener(window, 'load', initialize);
Of-course, the cursor will switch to value "default" at some point because of your margins css set to some pixels.
EDIT
The only other issue that could make the obstruction here is that you have developer tools tab open, this has been solved in this stackoverflow thread:
url: mouse hover on anchor tag does not display pointer cursor. Behavior observed on Chrome, works fine on IE 9?
If you still have problems then you shoul reveal your TestfieldControl function.
I have the below code, based on one of the API samples. A click on the map creates a marker. A click on the marker opens up an info window. Now I want a click on the info window to do something. E.g. a click anywhere might close it, as opposed to the little cross in the corner. Or a click on it might open a new URL. Etc.
Unfortunately it seems there is no "click" event for info windows.
The closest I've got is shown as a commented out line below: I wrap my info window content in a div, and give that an onClick. This works, but there is a big border around it. I really want to be able to click anywhere in the info window box.
Is there a way?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Click Test</title>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
google.maps.visualRefresh = true; //New look visuals.
function initialize() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map-canvas");
if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '400px';
mapdiv.style.height = '600px';
}
var mapOptions = {
zoom:3,
center: new google.maps.LatLng(37.09024, -95.712891),
mapTypeId: google.maps.MapTypeId.TERRAIN
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
function placeMarker(location) {
var marker = new google.maps.Marker({
position: location,
map: map
});
var infowindow = new google.maps.InfoWindow({
//content: "<div onClick='test1()'>(lat,lng):<br/>"+location.lat()+","+location.lng()+"</div>"
content: "(lat,lng):<br/>"+location.lat()+","+location.lng()
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(marker.get('map'), marker);
infowindow.addListener('click',test1); //Does nothing
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
function test1(){alert("test1");}
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
UPDATE:
This image shows the problem when I use a clickable div inside the content (background set to red to show the extent of the region I can make clickable, and also that I can style; if I set a negative margin I just get scrollbars, not a bigger region!). It is the whole white area I want to be clickable, not just that red rectangle.
I decided to use InfoBox found in the Google Maps Utility Library. So in the header add a link to the library. Then replace the new google.maps.InfoWindow() line with this one:
var infowindow = new InfoBox({
closeBoxURL:"",
content: '<div onClick="test1();return false;" style="background:white;opacity:0.8;padding:8px">(lat,lng):<br/>'+
location.lat()+","+location.lng()+"</div>"
});
By setting closeBoxUrl to a blank string I get no close option. I added a large padding just so you can see that clicking right to the edge does indeed work.
You can also do it this way. I also use the boxClass option so the formatting is done in CSS:
var infoContent=document.createElement('div');
infoContent.innerHTML="(lat,lng):<br/>"+location.lat()+","+location.lng();
infoContent.onclick=test1;
var infowindow = new InfoBox({
closeBoxURL:"",
boxClass:"marker_popup",
content: infoContent,
});
(Aside, if doing it this way, on just some browsers it creates a marker below the InfoBox! Simplest fix is to change test1 so it looks like: function test1(event){alert("test1");event.preventDefault();return false;} )
P.S. I chose InfoBox over InfoBubble, as the latter has no documentation, and it had no obvious advantages to compensate for that major flaw! InfoBox has documentation and a reference. (links are for version 1.1.9)
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 );
} );
Here's the basic code, I cut it straight out:
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var markerSize = new google.maps.Size(20,34);
var houseMarker = new google.maps.MarkerImage("marker2.png",markerSize);
var markerShadowSize = new google.maps.Size(30,34);
var markerShadowPoint = new google.maps.Point(30,0);
var markerShadowAnchor = new google.maps.Point(0,35);
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
marker = new google.maps.Marker({
position:loadposition,
title:"<?=$feed['name']?>",
draggable:false,
clickable:true,
icon:houseMarker,
shadow:houseMarkerShadow
});
marker.setMap(map);
google.maps.event.addListener(marker, 'click', function(e){
var loadposition = new google.maps.LatLng(<?=$feed['location'][0]?>,<?=$feed['location'][1]?>);
var htmlContent = "<?=$feed['name']?><br/><?=$feed['address']?>";
infowindow.setPosition( loadposition );
infowindow.setContent(htmlContent);
infowindow.open(map);
});
For some reason, the shadow does not show. However, If I enable drag and drop and/or set up a marker animation (either bounce or drop) the shadow shows up once it's lifted up.. But as soon as the marker lays down the shadow disappears.
I can not find any other documentation on this nor similar questions / answers.
Thanks
The shadow image needs to be different than the marker image.
For example the marker shadow for google maps is like this;
http://maps.gstatic.com/mapfiles/shadow50.png
From your code;
var houseMarkerShadow = new google.maps.MarkerImage("marker2.png",markerShadowSize,markerShadowPoint,markerShadowAnchor);
Having the same image marker2.png as both the marker and the shadow probably isn't going to work as you expect.
It turns out that the syntax is correct. It's actually a bug with Google Chrome and Safari. Internet explorer and Firefox all render the shadow correctly.
The bug is opened at http://code.google.com/p/gmaps-api-issues/issues/detail?id=3993