jshimko / meteor-geocomplete Goto Github PK

Hello, maybe I'm missing something but I can't figure out this part of the documentation:

// Get the map and set a new zoom level.
var map = $("input").geocomplete("map");
map.setZoom(3);

for me, map is undefined.

More context:

Template.formFieldsForAddresses.rendered = function () {
  $('.addressDetailsWrapper').hide();

  $('.googleAutocomplete')
  .geocomplete({
    details: '.autocompleteWrapper',
    detailsAttribute: 'data-geo',
    mapOptions: {
      zoom: 10
    },
    markerOptions: {
      draggable: false
    }
  })
  .bind("geocode:result", function(event, result){
    console.log('googleAutocomplete', result);

    var map = $(".googleAutocomplete").geocomplete("map");

    debugger;

    $('.addressDetailsWrapper').show();
  });
}

This issue is with the http://geocomplete.meteor.com demo

Hi,

As long as I don't specify types in options everything is fine.
It uses the default ['geocode'] setting which outputs cities.

I want to search for food related places so I set
var options = { types: ["bakery","bar","cafe","food","restaurant","meal_takeaway","meal_delivery"] };

And then initialize my input with:
$("#restaurantname").geocomplete(options);

It doesn't work and silently fails. no error in console or server logs whatsoever.

Could you please provide any help ?

Is this normal ?

`Template.map.onCreated(function() {

     GoogleMaps.ready('map', function(map) {

        $("#search-bar").geocomplete({

            map: map.instance,

            details: "form",

            markerOptions: {

                draggable: true

            }

        }).bind("geocode:mapdragged", function(event, latLng){

        //  console.log('Working if shown'); <- this won't fire when map is dragged

        });

    });

});`

The mapdragged event won't fire, I'm trying to get the center of the maps latlng but it seems the event won't fire

I need to load 15 google maps on a single page, with the {location: "New York"}

if (GoogleMaps.loaded()) {
const currentIndex = this.data.index;
$(`input.input-search-location-${currentIndex}`).geocomplete({
        map: $(`#map-canvas-${currentIndex}`),
        markerOptions: {
          draggable: true
        },
        location: "New York"
});
}

first 11 maps are loaded successfully, however the last ones are just gray canvases.
Weired thing is that if I set location as a latitude and longitude array then all the maps are loaded successfully.

I'd like to store the geocomplete result in a session variable or reactive var

the below strategies don't work...nothing is firing:

    'change #Location_Input': function (event, template) {

        console.log('change was fired');

    },
    'keyup #Location_Input': function (event, template) {

        console.log('keyup was fired');

    },

I see the below in the docs but there is no indication or where to put this:

$("input")
  .geocomplete()
  .bind("geocode:result", function(event, result){
    console.log(result);
  });

I have the following code:
if (GoogleMaps.loaded()) {
$("input").geocomplete({
details: "form",
map:".map",
mapOptions: {
zoom: 12,
zoomControl: false,
mapTypeControlOptions: {
mapTypeIds:"ROADMAP"
},
streetViewControl: false,
},
markerOptions: {
draggable: true
}
}).bind("geocode:mapdragged", function(event, latLng){

            console.log('Working if shown');

        });
    }

Everything is working besides the zoom property. I do not understand why.
Any suggestions would be most welcome.

I have no idea why this is not working as your example. I just want a simple input box with autocomplete. It seems like it is loading google maps but no autocomplete dropdown is visible

input(type='text')#us2-address

t.autorun ->
    if GoogleMaps.loaded()
      t.$('#us2-address').geocomplete()

and I loaded google maps with places library and my API key.

Why no dropdown?

When you click on one of the search results in the dropdown the value will not be set in the input. I suspect that the events are listening to a 'click' event instead of tab.

Hello.
Thank you so much for your work. It really works great.
I was just wondering how I could make it work with Semantic UI and the search function. Simpler, would it be possible to extract request result to fill another list than the one used by default here ? Please let me know.

If I set up dburles test project https://github.com/dburles/meteor-google-maps-demo and do

meteor remove dburles:google-maps
meteor add jeremy:geocomplete

Then run it the project throws an error

ReferenceError: Can't find variable: GoogleMaps

Looking at your package.js file it seems ok but somehow the GoogleMaps object is not loading.

If I add in dburles:google-maps separately then it works.

Hi,
When I use geocomplete inside modals - I can not see the text dropdown
(though i can navigate options with up\down keys..)

<template name="newSetupItemModal"> <div id="modal-form-{{instance.modalName}}" class="modal fade" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> {{> quickForm id="formUpdate" schema="Schema.Test" collection="Test" type="insert" }} ...
Any suggestions?

Thanks.

I have error when I run geocomplete():

Template.test.onRendered(function () {
    this.autorun(function () {
        if (GoogleMaps.loaded()) {
            $('input.js-search-location').geocomplete();
        }
    })
});

InvalidValueError: setComponentRestrictions: not an Object

Do you have any idea what is wrong?

Hey, I get this when using mupx and AWS but not when working locally
Uncaught TypeError: $(...).geocomplete is not a function

Any ideas?

I want to get the location by using lat and lng as input

Creating a new project from scratch and following the steps to achieve google places together with the maps I have not managed to work alone I get the search box googleplaces but I do not get the vizualuzacion of the map, the only way that managed to visualize and everything works Is correctly using

geocomplete

Which works with a somewhat old version of meteor.

I'm unable to select options from the Autocomplete list on mobile Safari. Every time I click on one the autocomplete disappears but the suggestion isn't placed into the input.

hello,

I tried to use the detailsScope option to have multiple forms on a single page but It still uses autofills the information (locality, latitude ...etc) on the first input fields it finds on the page.

I used id and name of a div in the detailedScope but it does not seem to pick it up

Do you have a sample (HTML and JS) on the usage of it ?

thanks

When I pass in the map: '.class/#id' param I get this error:

$('.googleAutocomplete')
  .geocomplete({
    map: 'mapContainer'
  })

Exception from Tracker afterFlush function: undefined is not an object (evaluating 'a[yb]')
Qj@https://maps.gstatic.com/maps-api-v3/api/js/20/2/main.js:45:1804
Zk@https://maps.gstatic.com/maps-api-v3/api/js/20/2/main.js:53:1170
initMap@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:148:37
init@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:130:19
GeoComplete@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:124:14
http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:564:37
each@http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:417:27
each@http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:169:21
geocomplete@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:560:23
rendered@http://localhost:3000/client/templates/settings/_formFieldsForAddresses.js?f16d4fb71fffb6d1b7fac3579dc8c30d2ae6a769:5:15
http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:3008:25
http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1733:18
_withCurrentView@http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:2043:16
http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1732:31
flush@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:448:15

I have your package up and running tank you very much. However I am running into an error when I reload the page or when the server does a restart after a code change. The full error is as follows:

Exception from Tracker afterFlush function: debug.js:41
ReferenceError: google is not defined debug.js:41
at GeoComplete.$.extend.initGeocoder (jquery.geocomplete.js:185)
at GeoComplete.$.extend.init (jquery.geocomplete.js:101)
at new GeoComplete (jquery.geocomplete.js:93)
at HTMLInputElement. (jquery.geocomplete.js:580)
at Function.jQuery.extend.each (jquery.js:384)
at jQuery.fn.jQuery.each (jquery.js:136)
at $.fn.geocomplete (jquery.geocomplete.js:576)
at Template.driversTemplate.rendered (driversController.js?8ad445d79df3d3f774fd9c07e825fe63278bc56d:340)
at runTemplateHooks (template-extension.js:375)
at templateExtensionMasterHook (template-extension.js:324)

Now again this only appears when I manually refresh the browser or when the server restarts with a code update. If I switch between pages and come back to the page with the map it does not happen.

To fix this I have to stop the server, close the browser and start again. I am for the life of me unsure what is causing this to happen.

Below is the code that I have in the Meteor Startup - I have removed my key value....

      Meteor.startup(function() {
    GoogleMaps.load({
        key: 'my real key goes here',
        libraries: 'places'  // also accepts an array if you need more than one
    });
        });

in my template js file I have the following code :

Template.driversTemplate.onRendered(function () {
    this.autorun(function (){
        // Wait for API to be loaded
        if (GoogleMaps.loaded()) {
            console.log("Getting Here!");
            $('input:text[name=address]').geocomplete();
        }
    });
}); 

Template.driversTemplate.rendered = function (){     
    $('input:text[name=address]')
        .geocomplete()
        .bind("geocode:result", function(event, result){
            console.log(result.address_components.length);
            console.log(JSON.stringify(result, null, 2));
    });
}

This is the only code I have that is touching this package as I kept it isolated until I got it all working. Any help is greatly appreciated in solving what is causing this error.

I'm having an issue with geocomplete() function being undefined.
All I need is an input with autocomplete dropdown to work.
Here's the full error I'm getting from Chrome Console:

Exception from Tracker recompute function: undefined is not a function
TypeError: undefined is not a function
    at http://localhost:3000/client/js/profile.js?f257098d39aee6fbccb2fee6303ef488783247fe:16:23
    at Tracker.Computation._compute (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:296:36)
    at Tracker.Computation._recompute (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:310:14)
    at Tracker.flush (http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:440:14)

More info from Safari Console:

Exception from Tracker recompute function: undefined is not a function (evaluating '$("#location").geocomplete()')
http://localhost:3000/client/js/profile.js?f257098d39aee6fbccb2fee6303ef488783247fe:16:34
_compute@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:296:36
_recompute@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:310:22
flush@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:440:24

I set up my project with iron-router like this:

if (Meteor.isClient) {
  // Keep showing the launch screen on mobile devices until we have loaded
  // the app's data
  dataReadyHold = LaunchScreen.hold();

  // Show the loading screen on desktop
  Router.onBeforeAction('loading', {except: ['welcome']});
  Router.onBeforeAction('dataNotFound', {except: ['welcome']});

  Router.onBeforeAction(function() {
    if (!Meteor.loggingIn() && !Meteor.user()) {
      Router.go('welcome');
      this.next();
    } else if(Router.current().route.getName() === 'welcome'){
      Router.go('profile');
    }else{
      this.next();
    }
  });

  Router.onBeforeAction(function() {
    GoogleMaps.load({
      key: 'MY-API-KEY',
      libraries: 'places'
    });
    this.next();
  }, { only: ['profile'] });
}

And my template looks like this:

Template.profile.rendered = function () {
    Tracker.autorun(function () {
        if (GoogleMaps.loaded()) {
          $("#location").geocomplete();
        }
    });
};

Hi,

it's partially working - i got geocomplete, but no map and marker (however I see that map div changes in html from empty div). May you pls help?

router.js

Router.onBeforeAction(function (){
GoogleMaps.load({libraries: 'places' });
this.next();   }, {only:['userProfile']});

template.js

Template.userProfile.events({
  'click #find': function (){
       event.preventDefault();                                
       $("#geocomplete").trigger('geocode');    
    }
});

Template.userProfile.rendered=function () {
   $("#geocomplete").geocomplete({map:".map_canvas"});
}; 

html.html

             <div class="input-group">
                <input class="form-control" id="geocomplete" type="text" autocomplete="off">
                <span class="input-group-btn">
                  <button class="btn btn-primary" id="find">FIND</button>
                 </span>                
              </div>                
            <div style="width:900px;height:900px;">
              <div class="map_canvas">                       
              </div>
           </div>

When my map first loads it not rendering correctly, one of the ways to fix this is trigger a resize event

I tried the following
$("#location").geocomplete(map, "resize");
$("#location").geocomplete.maps.event.trigger(map, 'resize')

Is there a way to do this?

My apologies if this is an issue that is not dealt with here.

I am trying to retrieve the current map center with the following code.
The geocode:mapdragged is working, but the result is coming back as:

[Exception: TypeError: 'caller' and 'arguments' are restricted function properties and cannot be accessed in this context. at Function.remoteFunction (:3:14)]

if (GoogleMaps.loaded()) {
            $("input").geocomplete({ 
                details: "form",
                map:".map",
                mapOptions: {
                    zoom: 12,
                    zoomControl: true,
                    mapTypeControlOptions: {
                        mapTypeIds:"ROADMAP"
                    },
                    streetViewControl: false,
                },
                markerOptions: {
                    draggable: false
                }
            }).bind("geocode:mapdragged", function(event, result){

                console.log(result);

            });
        }

Is it possible to generate a number of markers based on post data, I'm not seeing anything about this in the docs?

I'm getting the following error at Firebug, and the autocomplete is not working:

Exception from Tracker afterFlush function: google is not defined
.initGeocoder@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:202:7
.init@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:132:7
GeoComplete@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:124:5
$.fn.geocomplete/<@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:564:22
.each@http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:417:14
jQuery.prototype.each@http://localhost:3000/packages/jquery.js?dd8bac56f8fd3666d433d2285ae01e52597cc51a:169:10
$.fn.geocomplete@http://localhost:3000/packages/jeremy_geocomplete.js?158b7ca96e177686ccb411194789c7d312ee75a7:560:1
Template.landing.rendered@http://localhost:3000/lib/landing.js?e6bb112e16293b122497906ccfb7c6b16f834cf4:18:5
Template.prototype.constructView/<@http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:3008:7
Blaze.View.prototype.onViewReady/fire/</<@http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1733:11
Blaze._withCurrentView@http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:2043:12
Blaze.View.prototype.onViewReady/fire/<@http://localhost:3000/packages/blaze.js?efa68f65e67544b5a05509804bf97e2c91ce75eb:1732:9
Tracker.flush@http://localhost:3000/packages/tracker.js?517c8fe8ed6408951a30941e64a5383a7174bcfa:448:11

meteor....b7370ec (línea 887)

My code is quite simple:
if(Meteor.isClient){
Meteor.startup(function() {
GoogleMaps.load({
key: 'here_i_have_put_my_key',
libraries: 'places'
});
});

// Set places autocomplete
Template.landing.rendered = function(){
$('section :input').val('').fancyInput()[0].focus(); // Making my input cute
$('section :input').geocomplete(); // Error
}
}

Any idea?

When I console log the following, I am not getting anything... it says

function (){return a}

    this.autorun(function () {
        if (GoogleMaps.loaded()) {
            $("#Location_Input")
                .geocomplete()
                .bind("geocode:result", function(event, result){
                    console.log(result.geometry.location.lat);
                });
        }
    });

Everything else the input returns (that isn't in an object) returns fine.

I am currently trying to make use of this however I get the following error:
Google Maps API error: ApiNotActivatedMapError

This is strange because when I try to data from an example api call

https://maps.googleapis.com/maps/api/place/autocomplete/json?input=Vict&types=(cities)&language=pt_BR&key="MY KEY HERE"

it works fine.

I am using angular2 not blaze, could this be a problem?

My main.js

// client
Meteor.startup(function() {
  GoogleMaps.load({
    key: 'MY KEY HERE',
    libraries: 'places'  // also accepts an array if you need more than one
  });
});

my html (although even if I take out all this HTML I still get the same error)

<div class="half">
  <h4>Autocompletes Only</h4>
  <input id="place1" type="text" name="place" placeholder="Start typing...">
</div>

<script>
    if (GoogleMaps.loaded()) {
      $("#place1").geocomplete();
    }
</script>

Any help is appreciated.

Just trying to get my head around is to how this package is different to lukemadera/meteor-autoform-googleplace in the sense that with lukemadera's package I'm able to get suggestions for local places (cafes and such) but not with meteor-geocomplete. Both packages load the same Places library but why different results?

Hi, thank you for your package.
Is there any event that I can use to format my string before sending it to Google ? For example, when user type "307/35 street name", I want to search as "307 street name".
Thank you very much.

@jshimko Thanks for the great work and continuous maintaining it. My requirement is to trigger or find the geocomplete manually. because I am doing some extra field work behind the scene (that is not related). the real problem is i attached the event on enter key but it's not preventing event from triggering the geocode:result here is my code
'keyup #map-autocomplete': function(e, t){ if( e.which == 13 ){ e.stopImmediatePropagation() callMapSubmit(t); }
but it triggers the geocode:result as well.
i tried with e.preventDefault() and stopPropagation as well but no luck
for now i don't want to go beyond, i just need it will not trigger on enter key. any help will be greatly appreciated Thanks

Is there a way to feed in lat/lng into your geocode plugin and get the map displayed in the same way that calling .geocomplete does? I feel like re-issuing a geocompletion request each time i'm displaying a map, I would make a call to the API, and it would count towards my usage limit, or?

Is it possible to set a default location which gets the users current geo location?

the dropdown does appear on ios 8 safari, but nothing happens when i hit enter or click one of the dropdown options

Just a suggestion... :)

I cannot understand why this is defined multiple times. any ideas?

You have included the Google Maps API multiple times on this page. 
This may cause unexpected errors.

this is inside my routes.js

Router.onBeforeAction(function() {
  GoogleMaps.load({
    libraries: 'places'
  });
  this.next();
}, { only: ['oneRoute', 'anotherRoute'] });

thanks