How to use AutoComplete Listener

[Mohsing511]

i am finding it difficult to join map with input field which can be used to auto complete Help will be appreciated please reply fast

[bradcornford]

This isn't something this package doesn't do out of the box, but has been done before, see: https://github.com/bradcornford/Googlmapper/issues/114

[Mohsing511]

its not working correctly here is my code my form

{!! Mapper::renderJavascript() !!}
      {!! Form::open(array('action' => 'locationController@store','method' => 'POST','id'=>'form_location')) !!}
                <div class="form-group col-lg-12">
                  {{Form::label('address','Address Manual')}}
                  {{Form::text('address','',['class'=>'form-control','placeholder'=>'Address here','id'=>"Manual",'name'=>"address"])}} 
                </div>
                <div class="form-group col-lg-12">
                  {{Form::label('lati','Latitude')}}
                  {{Form::text('latitude','',['class'=>'form-control','placeholder'=>'Latitude','id'=>"lat",'name'=>"lati"])}} 
                </div>
                <div class="form-group col-lg-12">
                  {{Form::label('longi','Longitude')}}
                  {{Form::text('longitude','',['class'=>'form-control','placeholder'=>'Longitude','name'=>'long','id'=>'long'])}}
                </div>
                  <div class="form-group col-lg-12">
                    {{Form::label('Search','Search Places Here')}}
                   {{ Form::input('text', 'location', null, ['id' => 'location', 'class' => 'form-control']) }}
                  </div>
                   <div class="form-group col-lg-12">
                  <div style="height: 600px;width: 90%" id="map"> {!! Mapper::render() !!}</div>
                  </div>
                <div class="col-lg-12">
                  <center>{{Form::Submit('Submit Location',['class' => 'btn btn-success btn-lg'])}}</center>
                </div>
                  {!! Form::close() !!}

and here is controller which displays map

public function create()
    {
         Mapper::map(31.5204, 74.3587,['marker'=>false,'zoom' => 12,'animation' => 'DROP','eventAfterLoad' => "new google.maps.places.Autocomplete(document.getElementById('mapaddress'));"])->marker(31.5204, 74.3587,['markers' => ['title' => 'lahore','symbol' => 'circle', 'scale' => 1000,], 'animation' => 'DROP', 'draggable' =>true,'eventDragEnd' =>"(document.getElementById('lat').value=(event.latLng.lat())); (document.getElementById('long').value=(event.latLng.lng()))",'google.maps.places.Autocomplete']);
             return view ('sadminpages.location.create');
    }

and here is script code

<script>
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('location'));
var form_location = $('#form_location');

form_location.on('submit', function(e){
    e.preventDefault();
});

google.maps.event.addListener(autocomplete, 'place_changed', function(){
    var place = autocomplete.getPlace();
    if(!place.geometry)
    {
        $.ajax({
            type: "POST",
            url: form_location.attr('action'),
            data: form_location.serialize(),
            success: function(location)
            {
                var latLng = new google.maps.LatLng(location.latitude, location.longitude);
                maps[0].map.setCenter(latLng);
                new google.maps.Marker({position: latLng, map: maps[0].map, draggable: true});
            }
        });
    }
    else
    {
        maps[0].map.setCenter(place.geometry.location);
        maps[0].markers[0].setPosition(place.geometry.location);
    }
});
</script>

[bradcornford]

Do you have any console errors?

[Mohsing511]

yes

[bradcornford]

What version of this package are you using? It appears to be old as the src for marker cluster has changed.

You also appear to be using a reference to an element that doesn't exist document.getElementById('mapaddress')

Also you need to setup your Google Maps API key properly (and also enable a development host), see: https://developers.google.com/maps/documentation/javascript/get-api-key

[Mohsing511]

"cornford/googlmapper": "2.*" (in composer.json) and document.getElementById('mapaddress') =>(my Bad!!! i added this id on search input) but still getting these errors and i have placed API key in vendor/comford/googlemapper/src/config/config.php 'key' => env('GOOGLE_API_KEY', 'AIzaSyAtqWsq5Ai3G***'

[bradcornford]

It may require you to re-publish the package assets, as version 2.37.0 has the correct path for marker clusters (Ensure you are up to date by running composer update). This can be done by running: php artisan vendor:publish --provider="Cornford\Googlmapper\MapperServiceProvider" --tag=googlmapper --force

The api key should live within your packages app/config/packages/cornford/googlmapper/config.php under the key variable.

Furthermore you API key doesnt appear to have permissions to run the palces api.

[Mohsing511]

I have done all the tasks you have asked me to do. thanks for that but still its not working correctly

i think we are close to solve this issue so please help me to get over this problem i'll be thankful to you sir

[Mohsing511]

should i use this script in blade file or not

[bradcornford]

You shouldn't need to add the script yourself, it should be added by the render method.

As for the billing, you need to enable this on your Google account to get rid of that error, along with add some restrictions:

[Mohsing511]

still have same problem auto complete is not working showing this error given below This page can't load google map correctly in Script link we use this. i think something like this is missing in my code or my java Script function is not working libraries=places guide me please i am stucked and working since last three day on maps

[Mohsing511]

in my controller Mapper::map(31.5204, 74.3587, ['eventAfterLoad' => "searchmap()"]); and script function is

<script>
function searchmap() {
console.log('working');
  var ac = new google.maps.places.Autocomplete(
    (document.getElementById('location')), {
      types: ['geocode']
    });

  ac.addListener('place_changed', function() {

    var place = ac.getPlace();

    if (!place.geometry) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      // Do anything you like with what was entered in the ac field.
      console.log('You entered: ' + place.name);
      return;
    }

    console.log('You selected: ' + place.formatted_address);
  });
}

</script>

whats wrong with this code Thank You

[bradcornford]

Your script will need to be after the {!! Mapper::render() !!} call in your template.

The places library is already included as part of this library.

What does your template look like?

[Mohsing511]

Thanks for reply long waited

{!! Mapper::renderJavascript() !!}
@extends(Auth::guard('admin')->check() ? 'layouts.adminapp' : 'layouts.sadminapp')
@section('content') 
<div class="col-lg-12"><center><h2 class="bg-primary">Location on map</h2></center></div>
<div class="col-md-8 col-md-offset-2">
            <div class="panel panel-default">
                <div class="panel-heading" style="background: grey;"><center><h3 style="font-family:cursive;">Academy Location Form</h3></center></div>

                <div class="panel-body bg-info">
                  {!! Form::open(array('action' => 'locationController@store','method' => 'POST','id'=>'form_location')) !!}
                <div class="form-group col-lg-12">
                  {{Form::label('address','Address Manual')}}
                  {{Form::text('address','',['class'=>'form-control','placeholder'=>'Address here','id'=>"Manual",'name'=>"address"])}} 
                </div>
                <div class="form-group col-lg-12">
                  {{Form::label('lati','Latitude')}}
                  {{Form::text('latitude','',['class'=>'form-control','placeholder'=>'Latitude','id'=>"lat",'name'=>"lati"])}} 
                </div>
                <div class="form-group col-lg-12">
                  {{Form::label('longi','Longitude')}}
                  {{Form::text('longitude','',['class'=>'form-control','placeholder'=>'Longitude','name'=>'long','id'=>'long'])}}
                </div>

                  <div class="form-group col-lg-12">
                    {{Form::label('Search','Search Places Here')}}
                   {{ Form::input('text','location','',['id' => 'location', 'class' => 'form-control']) }}
                  </div>
                   {{--   --}}
                   <div class="form-group col-lg-12">
                  <div style="height: 600px;width: 90%" id="map"> {!! Mapper::render() !!}</div>
                  </div>
                <div class="col-lg-12">
                  <center>{{Form::Submit('Submit Location',['class' => 'btn btn-success btn-lg'])}}</center>
                </div>
                  {!! Form::close() !!}
</div>
</div>
</div>
 @endsection
 @section('javascript')
<script>
function searchmap() {
var autocomplete = new google.maps.places.Autocomplete($("#location")[0], {});
console.log(autocomplete);
google.maps.event.addListener(autocomplete, 'place_changed', function(){
    var place = autocomplete.getPlace();
     console.log(place.address_components);
    if(!place.geometry)
    {
        //This is where I believe I need to do the ajax request.
        console.log('Getting here on form submit with just a zip code. Not using an autocomplete selection.');
    }

    maps[0].map.setCenter(place.geometry.location);
    maps[0].markers[0].setPosition(place.geometry.location);
});
}
</script>
@endsection

in controller to load map

Mapper::map(31.5204, 74.3587, ['eventAfterLoad' => "searchmap()"])->->marker(31.5204, 74.3587,['markers' => ['symbol' => 'circle', 'scale' => 1000,], 'animation' => 'DROP', 'draggable' =>true,'eventDragEnd' =>"(document.getElementById('lat').value=(event.latLng.lat())); (document.getElementById('long').value=(event.latLng.lng()))"]);
             return view ('sadminpages.location.create');

[Mohsing511]

Api using version using cornford/googlmapper v2.37.0 An easy way to integrate Google Maps with Laravel.

[Mohsing511]

how can i use callback function which runs after i type something in searchbox.

[bradcornford]

{!! Mapper::render() !!}
<input type='text' id='location'>

<script>
var input = document.getElementById('location');
var autocomplete = new google.maps.places.Autocomplete(input);

autocomplete.addListener('place_changed', function() {
    var place = autocomplete.getPlace();

    if (!place.geometry) {
        window.alert('No details available for input: ' + place.name);
        return;
    }

    maps[0].map.setCenter(place.geometry.location);
    maps[0].markers[0].setPosition(place.geometry.location);
});
</script>

You need to enable billing on your account for this to work!

[Mohsing511]

I got it. i have to enable billing. you are such a humble person very cooperative and helped me a lots.best wishes for you man.again thanks for your time :)