Google Places API autocomplete not working - google-maps-api-3

Right now, the autocomplete box works just fine when I click on the location, but when I press down, highlight the location that I want to go to, and press enter, it simply goes back to the home location of the map. Any insights on this? I call this function in initialize(). I'm lost as to what I possibly did wrong. Is this just a google api bug? If so, any insights as to how to work around it?
function setupAutoComplete() {
var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-90, -180),
new google.maps.LatLng(90, 180));
var input = document.getElementById('placeSearch');
var options = {
bounds: defaultBounds,
types: ['(regions)']
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(autocomplete, 'place_changed', function() {
alert('hi');
removeAllOverlays();
var place = autocomplete.getPlace();
var mapCenter = place.geometry.location;
var colLat = mapCenter.lat() - (halfPoints)*latSeparation;
var colLng = mapCenter.lng() - (halfPoints)*lngSeparation;
var tempStart = new google.maps.LatLng(colLat, colLng);
map.setCenter(mapCenter);
pointArray[0][0] = tempStart;
reService();
mapSearch();
drawBounds();
});
}
Thanks so much!

I guess the input#placeSearch is placed inside a <form>.
You submit the form when you press [ENTER].
You may either remove the surrounding form or cancel the submission by adding:
onsubmit="return false"
...to the form-element.

I just hit this issue and went with the following, as I do want to submit the form at a later stage. This code is from google groups.
var input = document.getElementById('create-location');
var options = {
//types: ['(cities)'],
};
autocomplete = new google.maps.places.Autocomplete(input, options);
google.maps.event.addDomListener(input, 'keydown', function(e) {
if (e.keyCode == 13)
{
if (e.preventDefault)
{
e.preventDefault();
}
else
{
// Since the google event handler framework does not handle early IE versions, we have to do it by our self. :-(
e.cancelBubble = true;
e.returnValue = false;
}
}
});

Related

Google Map API, search box

I have integrated a Google Map on my page and add a search box to it with the following code:
var input = document.getElementById('pac-input');
var searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
// Bias the SearchBox results towards current map's viewport.
map.addListener('bounds_changed', function() {
searchBox.setBounds(map.getBounds());
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
var autocomplete = new google.maps.places.Autocomplete(input);
autocomplete.bindTo('bounds', map);
autocomplete.addListener('place_changed', function() {
var place = autocomplete.getPlace();
if (!place.geometry) {
return;
}
// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
});
Currently this give me a search box with autocompletion list, which is good. But I have to click on a item of this list to go to the location. If I just type something in the input an hit enter, nothing happened..
Any help ?
Thanks !
Try changing
var searchBox = new google.maps.places.SearchBox(input);
to
var autocomplete = new google.maps.places.Autocomplete(input);

How to call a iframe in a panel in firefox extension

I am trying to create a extension in Firefox using sdk addon. What i want to do is to call an iframe inside a panel.
I have already created the extension for chrome and now i am trying to do it for firefox.
I have a facebook login in the iframe. Once i click on the sign in button the iframe just goes blank. If I log in before hand then also the extension doesnt work. It is as if it can't access the session.
Here is the code of my main.js file.
var { ToggleButton } = require('sdk/ui/button/toggle');
var panels = require("sdk/panel");
var data = require("sdk/self").data;
var {Cc, Ci} = require("chrome");
var tabs = require("sdk/tabs");
var title=tabs.activeTab.title;
var button = ToggleButton({
id: "my-button",
label: "my button",
icon: {
"16": "./logo1.png",
"32": "./logo1.png",
"64": "./logo1.png"
},
onChange: handleChange
});
var panel = panels.Panel({
width:450,
height:400,
contentURL: data.url("popup.html"),
onHide: handleHide
});
function handleChange(state) {
if (state.checked) {
panel.show({
position: button
});
}
}
function handleHide() {
button.state('window', {checked: false});
}
here is the code of my main javascript file that calls the iframe
$(document).ready(function() {
document.body.style.display = 'block';
var ur='xyz';
var frame = document.createElement('iframe');
var frame_url = 'https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod';
frame.setAttribute('width', '100%');
frame.setAttribute('height', '100%');
// frame.setAttribute('margin', '-10%');
frame.setAttribute('frameborder', 'none');
frame.setAttribute('id', 'rtmframe');
$('body').height(450).width(400);
frame.setAttribute('src', frame_url);
document.body.appendChild(frame);
$('iframe#rtmframe').load(function() {
$('#loadImg').hide();
});
});
This is not the actual link i am trying to open. Can anyone suggest what i can do differently. or point me to github code that might be doing the same thing.

Check if infowindow is opened Google Maps v3

Please, I need a help.
I want to check if my infowindow is opened.
For example:
if (infowindow.isOpened)
{
doSomething()
}
or
if (infowindow.close)
{
doAnotherthing();
}
I dont have any idea, how to do this
This is an undocumented feature, and is therefore subject to change without notice, however the infoWindow.close() method sets the map on the object to null (this is why infoWindow.open(map, [anchor]) requires that you pass in a Map), so you can check this property to tell if it is currently being displayed:
function isInfoWindowOpen(infoWindow){
var map = infoWindow.getMap();
return (map !== null && typeof map !== "undefined");
}
if (isInfoWindowOpen(infoWindow)){
// do something if it is open
} else {
// do something if it is closed
}
Update:
Another potentially useful way to write this is to add an isOpen() method to the InfoWindow prototype.
google.maps.InfoWindow.prototype.isOpen = function(){
var map = this.getMap();
return (map !== null && typeof map !== "undefined");
}
Until google doesn't give us any better way of doing this, you can add a property to the infoWindow objects. Something like:
google.maps.InfoWindow.prototype.opened = false;
infoWindow = new google.maps.InfoWindow({content: '<h1> Olá mundo </h1>'});
if(infoWindow.opened){
// do something
infoWindow.opened = false;
}
else{
// do something else
infoWindow.opened = true;
}
I modified the prototype for google.maps.InfoWindow and changed open/close to set/clear a property:
//
// modify the prototype for google.maps.Infowindow so that it is capable of tracking
// the opened state of the window. we track the state via boolean which is set when
// open() or close() are called. in addition to these, the closeclick event is
// monitored so that the value of _openedState can be set when the close button is
// clicked (see code at bottom of this file).
//
google.maps.InfoWindow.prototype._open = google.maps.InfoWindow.prototype.open;
google.maps.InfoWindow.prototype._close = google.maps.InfoWindow.prototype.close;
google.maps.InfoWindow.prototype._openedState = false;
google.maps.InfoWindow.prototype.open =
function (map, anchor) {
this._openedState = true;
this._open(map, anchor);
};
google.maps.InfoWindow.prototype.close =
function () {
this._openedState = false;
this._close();
};
google.maps.InfoWindow.prototype.getOpenedState =
function () {
return this._openedState;
};
google.maps.InfoWindow.prototype.setOpenedState =
function (val) {
this._openedState = val;
};
You also need to monitor the closeclick event because clicking on the close button does not call close().
//
// monitor the closelick event and set opened state false when the close
// button is clicked.
//
(function (w) {
google.maps.event.addListener(w, "closeclick", function (e) {
w.setOpenedState(false);
});
})(infowindow);
Calling InfoWindow.getOpenedState() returns a boolean which reflects the state (opened/closed) of the infowindow.
I chose to do it this way instead of the using the InfoWindow.getMap() or MVCObject.get('map') method because of the well known pitfalls of using undocumented behavior. However google uses MVCObject.set('map', null) to force the removal of the InfoWindow from the DOM, so it is unlikely that this will change...
infowindow.getMap() returns null if infowindow is closed.
So you can use simply:
if (infowindow.getMap());
You can simply set key and value for infoWindow: infoWindow.set('closed', true);
example:
const infoWindow = new google.maps.InfoWindow({
content: 'foo',
position: {
lat: some_number,
lng: some_number
}
});
infoWindow.set('closed', true);
// Clicking on polyline for this example
// Can be marker too
polyline.addListener(
'click',
() => {
if (infoWindow.get('closed')) {
infoWindow.open(map);
infoWindow.set('closed', false);
} else {
infoWindow.close();
infoWindow.set('closed', true);
}
}
);

clicking a button in infowindow causes map click to register on google maps api v3

i have an infowindow that has an "erase entry" button, that when clicked, removes the marker and closes the info window.
when i click the "erase entry" button, it removes the marker and closes the infowindow just fine, but it also registers another click on map, and i have no idea why, and it's driving me nuts.
has anyone bumped into this problem before?
i'm quite a noob at javascript, so any suggestions on implementation would be great too. thank.
below's pseudocode/summary of what i'm doing:
//global variable to keep track of which was the last marker clicked
var lastMarkerJustClicked;
function load(){
//create the map and everything, add the following listener
google.maps.event.addListener(map, 'click', function (event) {
//firebug has been telling me that after i click "erase entry" and my marker is removed and my infowindow closes, i end up here
makeParticularMarker(event.latLng);
});
}
function makeParticularMarker(marker_parameter) {
var markerLocation = //do stuff to get the right marker parameter
var markerWithLocation = new google.maps.Marker({
position: markerLocation,
map: map
});
var html = "<input type='button' value='Erase Entry' onclick=eraseEntry() />"
var markerWithInfo = createMarkerWithHTML(markerWithLocation, html);
}
function createMarkerWithHTML(markerWithLocation, html) {
var markerWithInfo = google.maps.event.addListener(markerWithLocation, 'click', function () {
infoWindow.setContent(html);
infoWindow.open(map, markerWithLocation)
lastMarkerJustClicked=markerWithLocation;
});
}
function eraseEntry() {
infoWindow.close()
lastMarkerJustClicked.setMap(null);
}
i found the answer here: http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/221876cc70bea9c6?pli=1
it has to do with propagation. and you stop it by doing something like this
function doSomething(e)
{
if (!e) var e = window.event;
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
this site gives a better explanation about this: http://www.quirksmode.org/js/events_order.html

Google Maps API v3 - click event not firing when marker is clicked while another InfoWindow is open

I've got a setup in which multiple markers present, each loading in content to a single InfoWindow when it's clicked.
Unfortunately, it seems that the marker's click event is not being fired when it's clicked while another window is open.
This seems like an odd behavior. Has anyone else found this to be the case?
Thanks
My code below:
var infoWindow = new google.maps.InfoWindow();
if(markers) {
var length = markers.length;
for(var i = 0; i < length; i++) {
var details = markers[i];
markers[i] = new google.maps.Marker({
title: details.name,
position: new google.maps.LatLng(details.location[0],details.location[1]),
locCode: details.locCode
});
markers[i].setMap(map);
var thisMarker = markers[i];
google.maps.event.addListener(thisMarker, 'click', (function(thisMarker, i, details) {
// self calling function was the key to get this to work
return function() {
$.ajax({
url: 'js/locations/'+details.locCode+'.js',
dataType: 'script',
success: function(data) {
// do my specific stuff here, basically adding html to the info-window div via jQuery
// set the content, and open the info window
infoWindow.setContent($("#info-window").html());
infoWindow.open(map, thisMarker);
}
});
}
})(thisMarker, i, details));
}
}
Check out my answer here:
Jquery Google Maps V3 - Information window is always fixed to one marker
I think this will help resolve your issue.
Bob

Resources