Is possible add personal places to autocomplete in google maps api v3?

Question

I want to use autocomplete google search but I want to introduce some personal places

This was the code I used to add to search my places but the onclick doesn´t work:

$(".pac-container").append('<div id="areasearch' + e + '" class="pac-item areasearch" style="display:none" onclick="clickOneAreaLocalizar(\'' + $(this).text() + '\')"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>' + $(this).text() + '</span> <span>Area</span></div>');

this is the result:

And this is the code I use to add search in input:

var input = /** @type {HTMLInputElement} */(document.getElementById('searchbox')); 

     var searchBox = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(input),  { types: ['geocode'] });

     google.maps.event.addListener(searchBox, 'place_changed', function () {
         try{
                var places = searchBox.getPlace(); 

                if (places.length == 0) {
                    return; 
                } 

                var bounds = new google.maps.LatLngBounds();

                bounds.extend(places.geometry.location); 

                map.fitBounds(bounds);
         }catch(e){
             codeAddress();
         }

     });

I made this example for all understand better what I want

jsfiddle

the result qwerty have one onclick but doesn't work

Anyone have any idea how to do this?

thank's:)

Answer 1

I hope this will help

    $(document).ready(function(){

  var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(41.06000,28.98700)
     };

  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  
     searchBoxMapAddress = function () {

        // Create the search box and link it to the UI element.
        var input = /** @type {HTMLInputElement} */(document.getElementById('searchbox')); 

         var searchBox = new google.maps.places.Autocomplete(/** @type {HTMLInputElement} */(input),  { types: ['geocode'] });

        // Listen for the event fired when the user selects an item from the
        // pick list. Retrieve the matching places for that item.
         google.maps.event.addListener(searchBox, 'place_changed', function () {

                    var places = searchBox.getPlace(); 


                    // For each place, get the icon, place name, and location.

                    var bounds = new google.maps.LatLngBounds();

                    bounds.extend(places.geometry.location); 

                    map.fitBounds(bounds);


         });

        // Bias the SearchBox results towards places that are within the bounds of the
        // current map's viewport.
        google.maps.event.addListener(map, 'bounds_changed', function () {
            var bounds = map.getBounds();
            searchBox.setBounds(bounds);
        });

    }
    setTimeout(function(){
    $(".pac-container").append('<div id="areasearch" class="pac-item areasearch" onclick="alert(\'make onclick\')"><span class="pac-icon pac-icon-areas"></span><span class="pac-item-query"><span class="pac-matched"></span>qwerty</span> <span>Area</span></div>');
    }, 500);
     searchBoxMapAddress();
     });

jsfiddle

Answer 2

You can use this

var autocomplete = new google.maps.places.Autocomplete(document.getElementById('YourAutocomplete'));

                setTimeout(function(){
                    $(".pac-container").append('<div id="are" class="pac-item" onmousedown="alert(\'Yes workingt\')"><span class="pac-icon icon-airport"></span><span class="pac-item-query"><span class="pac-matched"></span>sample Address</span> <span>it\'s Working</span></div>');
                }, 500);