On this text field, you can type 'k' and 'm' into the contenteditable field and they correctly appear.
http://jsfiddle.net/MNsBK/
keyboardShortcuts: false // Doesn't work
But, if you drag the background, you'll lose the ability to type an 'm' or a 'k'. How do I stop Google Maps from grabbing these keyboard keys ('k' and 'm') ?
Does it have to be a Div that is editable? I added an input into the div and it doesn't override k & m
http://jsfiddle.net/MNsBK/27/
HTML:
<div id="map"></div>
<div id="keyIn" contenteditable="true">
<input type='text' />
</div>
JS:
$('#map').mouseup(function(){
$('#keyIn input').focus();
});
Let me know if it absolutely has to be an editable div and I'll have a closer look.
JQuery approach:
$("div [contenteditable=true]").keypress(function(e) {
e.stopImmediatePropagation();
});
stopPropagation vs. stopImmediatePropagation
After finding that solution, there's an even easier solution.
Use keyboardShortcuts: false attribute when creating the map instance.
map = new google.maps.Map(document.getElementById('map'), {
keyboardShortcuts: false,
center: {lat: 37.7932339, lng: -122.4077706},
zoom: 15});
http://jsfiddle.net/ZjYT2/2/
You can't prevent loosing the focus of the editable div, otherwise the panorama can't work, but you can store the caret position and restore it later (a simple focus would make the caret to go to the beginning instead of the original position).
Unfortunately, in a contentEditable enabled div, the method to obtain the current selection is much more complicated than just read/set the selectStart value (used by textareas). The best way is to use an external library for that: https://code.google.com/p/rangy/
var $keyIn = $('#keyIn');
var savedSel;
$keyIn.bind('keydown mouseup', function(){
savedSel = rangy.saveSelection();
})
$('#map').bind('mouseup', function(){
rangy.restoreSelection(savedSel);
savedSel = rangy.saveSelection();
$keyIn.focus();
});
The problem with the "k" and "m" keys still happens but only in Chrome
Related
Basically I'd like to be able to add a standalone button to trigger the Google Map I've embedded onto my site to enter fullscreen mode. I haven't had any luck locating an answer as of yet, so any help would be greatly appreciated.
Currently the only way to enter fullscreen mode is by clicking the fullscreen button inside the map (at the top right). I imagine I just need to assign the same command that this button has, although I'm not sure if that would work on an element outside of the map.
Thanks in advance!
I don't know if you solved this, but i've recently faced same problem and I want to share the way I did it.
Basically what I've done is show the default fullscreen control then find it in the dom using its title, then I manually fired click event.
When I verified that worked, I written a css to hide the button.
This is a little bit hacky but it works!
function initMap() {
var container = $('#container').get(0);
var map = new google.maps.Map(container, {
center: {lat: -39.000, lng: -60.000},
zoom: 3,
fullscreenControl: true
});
$('#fullscreen').click(function() {
$('#container div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
});
}
#container div.gm-style > button[title="Toggle fullscreen view"] {
display: none;
}
See this fiddle
Hope this help.
You could simply call requestFullscreen method from the map's container. Like this:
$('[data-id="map_go_fullscreen"]').click(function(e){
var map = document.querySelector(".gm-style");
map.requestFullscreen();
});
Docs: https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullScreen
map = new google.maps.Map(document.getElementById('map') , {
zoom: 6,
center: latLng,
gestureHandling: 'none'
});
initFullscreenControl(map);
function initFullscreenControl (map) {
var elementToSendFullscreen =
map.getDiv().firstChild;
var fullScreenControl =
document.querySelector('.fullscreen-control');
fullScreenControl.onclick = function() {
elementToSendFullscreen.requestFullscreen();
};
};
<div class="controls fullscreen-control">
<button title="Toggle Fullscreen"> Show full screen </button>
</div>
<div id = "map"></div>
The Google Maps documentation offers some customization of the StreetViewPanorama. However, what I'm using is the regular Google Maps Map, but with the option to go to Street view, as the StreetViewControl option is on.
Once the user goes into Street View on my Google Maps, the Street View shows default controls: A fullscreen button on the top right, and a back button with the address on the top left. But this is something my users don't quite intuitively understand (and frankly I don't blame them). I need a way to hide those controls, so I can substitute my own buttons.
I am familiar with detecting when a user has entered Street View, and I know how to show a button to have it exit Street View. What I don't know is, can I hide Google's default "back" button? I've tried using the properties of the StreetViewControl object straight into my Map object initialization, but it doesn't work; and understandably so, since some of the option names clash.
Per request, here is the code for showing the map, and showing/hiding my button that exits the Street view:
// Create a map object and specify the DOM element for display.
map = new google.maps.Map(document.getElementById('map'), {
center: this.mapCenter,
scrollwheel: true,
scaleControl: false,
overviewMapControl: false,
zoom: this.zoom
});
// Show the button for exiting Street View when Street view is entered
google.maps.event.addListener(map.getStreetView(), 'visible_changed', function(){
if(this.getVisible() == true) {
document.getElementById("exitStreetViewButton").style.display = "block";
} else {
document.getElementById("exitStreetViewButton").style.display = "none";
}
});
And this is the code that the Exit button executes to exit the Street View:
map.getStreetView().setVisible(false);
You can use this option:
panorama.setOptions(
{
enableCloseButton:false
}
);
I just ran into the same problem. Disabling the UI doesn't work, the exit button is the only element (besides the legal stuff at the bottom) still there.
As far as the documentation goes there is no way to remove it. I resorted to hiding it using css:
.gm-iv-container {
display: none;
}
Have a look at the StreetViewPanoramaOptions.
Try the disableDefaultUI option. You can set it to true to disable the default UI then enable some controls individually if you need.
var panoramaOptions = {
disableDefaultUI: true
};
JSFiddle demo
Edit:
If you need you can also do it that way:
var panorama = map.getStreetView();
panorama.setOptions(panoramaOptions);
I have a spoke in my wheels and I am not sure how to sort this out. I have been struggling with it for a couple days and it isn't like a normal infobox as it is not set to a marker rather a polygon which is something new for me. I have polygons that display with data from an XML file and they show up fine. I have searched the web and got it to have the mouseover set up to where you mouseover a polygon the opacity changes and an infobox pops up. Problem is the infobox when it pop up shows "undefined" instead of the html I have set in it to display with data from the XML file.
Here is a link to the test map for example.
http://www.mesquiteweather.net/googlemap_poly.html
Here is a link to the XML file where I am just trying to show the elements events and expires in the info box.
http://www.mesquiteweather.net/xml/warnings_test.xml
This is the code I am working with to create the infoboxes and mouseover events
function attachPolygonInfoWindow(polygon, html, event, expires)
{
var html = "<strong>" + event + "</strong>";
eventWarnings.infoWindow = new google.maps.InfoWindow({content: html});
google.maps.event.addListener(eventWarnings, 'mouseover', function(e) {
var latLng = e.latLng;
this.setOptions({fillOpacity:80});
polygon.infoWindow.setPosition(latLng);
polygon.infoWindow.open(map);
});
google.maps.event.addListener(eventWarnings, 'mouseout', function() {
this.setOptions({fillOpacity:0.35});
polygon.infoWindow.close();
});
}
var polygon = new google.maps.Polygon(/* omitted for brevity */);
attachPolygonInfoWindow(eventWarnings);
eventWarnings.setMap(map);
}
});
I am pretty sure it is something easy I am overlooking but I haven't been able to find anything that pertains to my issue. I am just lucky I got the infobox to show at all as I have learned it's tricky since polygons don't have a true center and they are not set up like you would with a marker which I can handle.
If anyone has any suggestions please let me know.
-Thanks
You defined your attachPolygonInfoWindow function with 4 argument, but only provide one when you call it:
// definition
function attachPolygonInfoWindow(polygon, html, event, expires)
...
// call
attachPolygonInfoWindow(eventWarnings);
Probably you want (I don't see the html or expires parameters being used):
attachPolygonInfoWindow(eventWarnings, "", event, null);
The other option would be to change the definition to:
// definition
function attachPolygonInfoWindow(polygon, event, expires)
and the call to (assuming you are going to use "expires" for something):
attachPolygonInfoWindow(eventWarnings, event, expires);
As it doesn't look like you need to pass in that parameter (event is serving the function that I would expect it to serve).
Also, FYI, you have a "hanging comma" in your alertColors.js which make IE unhappy...
example
I made this fiddle
http://jsfiddle.net/nAb6N/10/
As you can see I have 2 animators , a element and body class,
I am adding class to body after the first click on a element but once I click on body is not closing it. If I define animators as
var animators = $$('#opendiv,body');
it works ok except that I do not want the div to open on body click. I need it to close on body click.
Any help is appreciated.
Thank you!
Right. Seems as if you really require an outerClick pattern to close. Here's the one that is most notably used within mootools devs, allowing you to create a custom event, based on click:
Element.Events.outerClick = {
base : 'click',
condition : function(event){
event.stopPropagation();
return false;
},
onAdd : function(fn){
this.getDocument().addEvent('click', fn);
},
onRemove : function(fn){
this.getDocument().removeEvent('click', fn);
}
};
The way it works is: it is based on a normal click. upon adding, it adds the callback as a click event on the document. when a click happens within the element itself,it stops bubbling via event.stopPropagation();, else, it will bubble and the callback will run.
here's how it ties together after the above:
http://jsfiddle.net/dimitar/nAb6N/13/
(function() {
var opener = $('opendiv');
var boxtoopen = $('box');
boxtoopen.set('morph', {
duration: 700,
transition: 'bounce:out'
});
boxtoopen.addEvent('outerClick', function(event) {
boxtoopen.morph(".openOff");
opener.removeClass("hide");
});
opener.addEvent('click', function(e) {
e.stop();
boxtoopen.morph(".openOn");
this.addClass("hide");
});
})();
I have also 'outsourced' the morph properties to the CSS as it makes more sense, semantically.
P.S. note that you need mootools 1.4.3 or 1.4.5, but not 1.4.4 as there's a morph bug to do with units in that release. the jsfiddle above uses 1.4.6 (mootools edge).
Is there a way of preventing a Google Maps (JS, v3) map being displayed from the get-go? I'm doing some pre-processing and would like to show my 'Loading' spinner until everything is good to go (more eloquently put, hide the map -- e.g. the container div – until all pre-processing is complete – at which point, show the map).
Hooking up the map's idle event doesn't help that much, since the map is already displayed when this event hits.
I know that the container div gets inline-styled by GMaps after loading, my first idea was to clear out the style attribute (whilst listening to the idle event), but it would be interesting to see if there is a way of creating the map and not displaying it until all pre-processing is done.
Maybe by using an argument to the new google.maps.Map constructor, or a MapOption ?
Any thoughts on this?
Thank you in advance!
Also remember to call:
google.maps.event.trigger(map, 'resize');
if you have changed the size of the <div>. A display:none <div> has no size.
Or you could just hide it like with css visablility or css opacity.
$("#GoogleMap").css({ opacity: 0, zoom: 0 });
initialize();
google.maps.event.addListener(map,"idle", function(){
$('#Loader').hide();
$("#GoogleMap").css({ opacity: 1, zoom: 1 });
});
This works for me. I'm using the JQuery library.
$(document).ready(function(){
$('#Checkbox').click(function(){
$('#googleMapDiv').toggle();
initialize(); // initialize the map
});
});
another way to show the hidden map when map is first time rendering the <div> is to set style: visibility.
When firstly hidden, use visibility = hidden; to show use visibility = visible
the reason is: visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
this works fine for me, I use jquery tabs
setTimeout(function() {
google.maps.event.trigger(map, "resize");
map.setCenter(new google.maps.LatLng(default_lat, default_lng));
map.setZoom(default_map_zoom);
}, 2000);
om this link https://code.google.com/p/gmaps-api-issues/issues/detail?id=1448
This will work
google.maps.event.addListener(map, "idle", function ()
{
google.maps.event.trigger(map, 'resize');
});
better way:
gmap.redraw = function() {
gmOnLoad = true;
if(gmOnLoad) {
google.maps.event.trigger(gmap, "resize");
gmap.setCenter(gmlatlng);
gmOnLoad = false;
}
}
and in show click event:
$("#goo").click(function() {
if ($("#map_canvas").css("display") == "none") {
$("#YMapsID").toggle();
$("#map_canvas").toggle();
if (gmap != undefined) {
gmap.redraw();
}
}
});
depending on what you are doing another posibility could be to have multiple bools you set to true when each process is done.
For example:
if you have a geocode service running which you want to wait for, you could have a var called
GeoState
and in the result part of the geocoder set GeoState to true,
then have a timed function check if all the services have returned true, when they have, make the map visible.