how show result the autocomplete in the map in CodeIgniter Google Maps V3 API Library?

Question

I am using CodeIgniter Google Maps V3 API Library URL to select location in my form. So my controller is as below :

$config['center'] = '37.4419, -122.1419';
$config['zoom'] = 'auto';
$config['places'] = TRUE;
$config['placesAutocompleteInputID'] = 'event_location';
$config['placesAutocompleteBoundsMap'] = TRUE; // set results biased towards the maps viewport
$config['placesAutocompleteOnChange'] = 'alert(\'You selected a place\');';

$this->googlemaps->initialize($config);

And the view is :

<div class="form-group">
    <label class="col-md-3 col-xs-12 control-label">Select Venue in google map</label>
    <div class="col-md-6 col-xs-12">                                                                                                                                     
        <?php 
            $google_map_date = array(
              'name'        => 'event_location',
              'type'        => 'text',
              'id'          => 'event_location',
              'class'       => 'form-control',
            );

        ?>
        <?php echo form_input($google_map_date);?>
        <span class="help-block"></span>                                        
    </div>
    <div class="col-md-12 col-xs-12">    
        <?php echo $map['html']; ?>
    </div>
</div>

Although I am able to autoselect the locations, the map is not showing the selected location. What should I code , to show the selected location instead of just alerting You selected a place.

Answer 1

Here is the working example:

$config['placesAutocompleteOnChange'] = "

        markers_map[0].setVisible(false);
        var place = placesAutocomplete.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);
          map.setZoom(15);
        } else {
          map.setCenter(place.geometry.location);
          map.setZoom(15);
        }

        markers_map[0].setPosition(place.geometry.location);
        markers_map[0].setVisible(true);

        var address = '';
        if (place.address_components) {
          address = [
            (place.address_components[0] && place.address_components[0].short_name || ''), (place.address_components[1] && place.address_components[1].short_name || ''), (place.address_components[2] && place.address_components[2].short_name || '')
          ].join(' ');
        }

        ";