Is it possible to add personal sites to the google maps v3 autocomplete?

Question

I wanted to use the search of Google addresses but also wanted to introduce some personal areas. In the div which is generated by google I can add the fields I want, but I can’t create a function in click because there must be something in the google api that blocks the click. Below the code I used to add to the search:

   $(".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>');

Upshot:

This is the code to add the query to the input:

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

 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);
            localizarMaisProximo(places.geometry.location);

            map.fitBounds(bounds); 

 });

I made this example to better understand. jsfiddle when pressing qwerty makes an alert.

Does anyone have any idea how to do this? Thank you.

Answer 1

What you want is called custom marker (custom markers) You must create the bookmarks and add them to the map, this way they will appear in the search box as well!

See the links below:

• https://developers.google.com/maps/documentation/javascript/markers
• https://developers.google.com/maps/documentation/javascript/custom-markers
• https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-hotelsearch