When the map is loading the location, e.g. waiting for geolocation access, the search box renders on the edge of the map like this
Anyone know any tricks to stop this ? Either don't show the box at all, or put the box in the map where it should be.
As for code, even the Google example suffers from this problem: https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete
What is happening is that the <input> element is part of the HTML markup, and is visible on the page also before google maps has finished initalization. It is not an error or even unexpected behavior. You have two options :
1) set the <input> box visibility to hidden :
<input id="pac-input" class="controls" type="text"
placeholder="Enter a location" style="visibility:hidden;">
and show the box as the last thing in initialize()
google.maps.event.addListener(map, 'idle', function() {
input.style.visibility='visible';
});
see fiddle -> http://jsfiddle.net/xkAaJ/
2) create the input box by code. Remove the <input> markup and replace
var input = /** #type {HTMLInputElement} */(
document.getElementById('pac-input'));
in initialize() with
var input = document.createElement('input');
input.id="pac-input";
input.className="controls";
input.type="text";
input.placeholder="Enter a location";
see fiddle -> http://jsfiddle.net/wy6X3/
The code examples is based on the google places example you are refering to in the question.
Related
Is there any way to disable autocomplete on a text field in chrome 66?
I have tried a number of options like :
autocomplete="off"
autocomplete="false"
autocomplete="disabled"
autocomplete="something-new"
etc.
Can anyone help me with this?
Also, one more thing does chrome automatically enables autocomplete for a username if it has a password type field below it?
I used this code and it is working for me. I hope it will also helpful for you. :)
Enter your type with readonly and then below mention code.
<input readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
this.removeAttribute('readonly');
this.blur(); this.focus(); }" />
A lot of browsers refuse to adhere to what you have mentioned - the best way is to make an element readonly and then on hover/click/blur/focus, remove readonly.
So you could give it a class such as disable_autocomplete and also make the input field readonly.
Then when the field is hovered, focussed, or clicked you can remove readonly. Optionally, add it back when unfocussed.
$(document).ready(function(){
$("input").val("");
});
So, Chrome just sets the value of element when autofilling them. Just try that, else you can try set some interval, wich will check value in HTML code, because Chrome not put new value to HTML code, just puts it in memory for itself.
I acheived the auto complete functionality to be disabled in chrome by giving
<form autocomplete="off">
and
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
element.autocomplete = isChrome ? 'disabled' : 'off';
where isGoogleChrome is a function to find whether the browser is chrome written with help of this post.
JavaScript: How to find out if the user browser is Chrome?
I found something :
<input autocomplete="off" onfocus="this.setAttribute('autocomplete', 'I don\' t want this Google');" />
Good Day Everybody
function annihilateChromesAutocomplete(){
var clearAutocompleteInterval = setInterval(function(){
var peskyAutocompletedInputs = document.querySelectorAll("input:-internal-autofill-selected");
for(var i = (peskyAutocompletedInputs.length - 1); i > -1; i--){
peskyAutocompletedInputs[i].value = peskyAutocompletedInputs[i].defaultValue;
}
}, 1);
setTimeout(function(){
clearInterval(clearAutocompleteInterval);
}, 2000);
}
Use this
$(document).ready(function(){
$("input").attr("autocomplete", "off");
});
And if the autofill is enabled in chrome you can follow these steps to turn it off:
Turning Off Autofill in Chrome
Click the Chrome menu icon. (Three lines at the top right of your screen.)
Click on Settings.
At the bottom of the page, click “Show Advanced Settings”
In the Passwords and Forms section, uncheck “Enable Autofill to fill
out web forms in a single click”
Check out the newest version of Chrome V.67. They have fixed that issue.
I am working with an HTML input element that is about 10 to 12 characters in size. A user is free to enter any length of string into this field. However, when the user is finished and leaves focus of the textbox, the field shows the latest portion of the string. I want it to show the initial part of the string.
Is this possible?
Sample HTML:
<label><input type="text" name="input" id="text_field" /></label>
One jQuery, dirty&hack-ish, but working solution (not sure about CSS or other possibilities):
$('body').on('blur','#text_field', function() {
new_field = $(this).clone();
$(this).remove();
$('label').append(new_field);
});
DEMO> http://jsfiddle.net/9zswjtqe/4/
Idea is - clone (deep) element on blur, remove it, and attach new element/clone (with desired text position this time). Tested in Firefox, IE, Chrome. Works fine.
I checked that there are checkresize() methods from google Map's native API.. but it doesn't seem to work with the refresh function from gmaps.js.
Does anyone has similar problems using AngularJS and gMaps.js? How do you come to solve it?
After i resize the window, the map appears again. So I am thinking is there anyway to check resize on initialization for gMap.js?
ng-cloak did not work for me when I tried it. I think this was because I am using the map in a panel which expands on user interaction instead of being visible on load.
I switched my ng-show to an ng-if and it worked correctly. This is because the map code(I used a directive) will not run until the if condition is true, which allows it to render properly.
*Sorry the fiddle got deleted. I don't remember what I had in it, but it was something like this
<gmap unique="231" center="{{getAddress(item)}}" destination="{{getAddress(item)}}" origin="{{getMyAddress(item)}}" type="roadmap" marker-content="Hello"></gmap>
The important thing is that the google scripts don't start doing their thing until your container element is actually displayed. This is accomplished with the ng-if.
Add the ng-cloak property on your map element or on your directive element.
"The ngCloak directive is used to prevent the Angular html template from being briefly displayed by the browser"
http://docs.angularjs.org/api/ng.directive:ngCloak
map rendered successfully without resize.
Why resize gives you proper map ?
Because browser paints the view again.
How to fix it?
To get a proper layout of the map in any panel which is triggered lately, map has to be painted after the panel is loaded.This can be achieved by (setTimeout) code as mentioned below.
code objective is to trigger map resize event after 60 milli seconds.
setTimeout(function () {
uiGmapIsReady.promise().then(function (maps) {
google.maps.event.trigger(maps[0].map, 'resize');
lat = -37;
lon = 144;
maps[0].map.panTo(new google.maps.LatLng(lat,lon));
var marker = {
id: Date.now(),
coords: {
latitude: lat,
longitude: lon
}
};
$scope.map.markers = [];
$scope.map.markers.push(marker);
console.log($scope.map.markers);
});
}, 60);
Try to resize the map using this code in the controller:
NgMap.getMap().then(function(map){
google.maps.event.addListener(map, "idle", function(){
google.maps.event.trigger(map, 'resize');
});
});
When a web form is written to the browser, the browsers remembers what the initial values are of a text INPUT box. ie. when it receives HTML like this:
<input type="text" value="something">
The browser remembers "something" as the initial/default value. When the user starts typing over it, then hits ESC, the browser reverts the field to the initial value (or blank if it was initially blank of course).
However, when creating a text input box programatically, hitting ESC always seems to blank the box, even if I create it with a default value like so:
$('<input type="text" value="something">')
The browser doesn't count this as a default value and doesn't revert to it when hitting ESC. So my question is, is there a way to create a text box in code and somehow assign it a default value, so the ESC key works as if the browser received it in the HTML document?
You might looking for the placeholder attribute which will display a grey text in the input field while empty.
From Mozilla Developer Network:
A hint to the user of what can be entered in the control . The
placeholder text must not contain carriage returns or line-feeds. This
attribute applies when the value of the type attribute is text,
search, tel, url or email; otherwise it is ignored.
However as it's a fairly 'new' tag (from the HTML5 specification afaik) you might want to to browser testing to make sure your target audience is fine with this solution.
(If not tell tell them to upgrade browser 'cause this tag works like a charm ;o) )
And finally a mini-fiddle to see it directly in action: http://jsfiddle.net/LnU9t/
Edit: Here is a plain jQuery solution which will also clear the input field if an escape keystroke is detected: http://jsfiddle.net/3GLwE/
This esc behavior is IE only by the way. Instead of using jQuery use good old javascript for creating the element and it works.
var element = document.createElement('input');
element.type = 'text';
element.value = 100;
document.getElementsByTagName('body')[0].appendChild(element);
http://jsfiddle.net/gGrf9/
If you want to extend this functionality to other browsers then I would use jQuery's data object to store the default. Then set it when user presses escape.
//store default value for all elements on page. set new default on blur
$('input').each( function() {
$(this).data('default', $(this).val());
$(this).blur( function() { $(this).data('default', $(this).val()); });
});
$('input').keyup( function(e) {
if (e.keyCode == 27) { $(this).val($(this).data('default')); }
});
If the question is: "Is it possible to add value on ESC" than the answer is yes. You can do something like that. For example with use of jQuery it would look like below.
HTML
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<input type="text" value="default!" id="myInput" />
JavaScript
$(document).ready(function (){
$('#myInput').keyup(function(event) {
// 27 is key code of ESC
if (event.keyCode == 27) {
$('#myInput').val('default!');
// Loose focus on input field
$('#myInput').blur();
}
});
});
Working source can be found here: http://jsfiddle.net/S3N5H/1/
Please let me know if you meant something different, I can adjust the code later.
See the defaultValue property of a text input, it's also used when you reset the form by clicking an <input type="reset"/> button (http://www.w3schools.com/jsref/prop_text_defaultvalue.asp )
btw, defaultValue and placeholder text are different concepts, you need to see which one better fits your needs
i have the following code:
var point0 = new GLatLng(40.786729,-73.972766);
var marker0 = new GMarker(point0);
marker0.value = 0;
GEvent.addListener(marker0, "click", function() {
var myHtml = "<b><a href='http://Photos.Net'><br />01-0001</a></b><br /><br /><img src=http://adam.kantro.net/pics/Apartment/Thumbnails/Apartment-pic001.jpg><br/><br/><br/>";
map.openInfoWindowHtml(point0, myHtml);
});
the issue is that the image shows up outside the bounds of the popup window. Is there anyway to force the popup window to expand to fit this picture and the full html.
This is a pretty common problem with Google maps info windows.
Set the height explicitly on the image tag:
<img height="112" src=http://.../Apartment-pic001.jpg>
Check inherited styles being applied to the info window contents after it has been attached to the map.
Check out the following question:
How to set Google map's marker's infowindow max height?
Have you tried something like
map.openInfoWindowHtml('<div style="width: 20em">...</div>');
I don't believe it can auto size so you have to be cute and specify the width beforehand
also see here