Places search box

Sun May 17, 2015 6:43 pm

Hi,

I want to add google places search box to my app. This is somewhat described in the below link. But how do I add this to appery search button?

https://developers.google.com/maps/do...

Tue May 19, 2015 2:12 am

Hi Shabeer,

Here is a solution how to implement places search box example in Appery.io app.

Open "App settings" interface and add following external source:
Details: http://prntscr.com/76u23b/direct

pre

https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true&libraries=places

/pre
Add new CSS asset and populate it with following CSS code:

precode

.controls {
margin-top: 16px;
border: 1px solid transparent;
border-radius: 2px 0 0 2px;
box-sizing: border-box;
-moz-box-sizing: border-box;
height: 32px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

#pac-input {
background-color: #fff;
font-family: Roboto;
font-size: 15px;
font-weight: 300;
margin-left: 12px;
padding: 0 11px 0 13px;
text-overflow: ellipsis;
width: 400px;
}

#pac-input:focus {
border-color: #4d90fe;
}

.pac-container {
font-family: Roboto;
}

#type-selector {
color: #fff;
background-color: #4d90fe;
padding: 5px 11px 0px 11px;
}

#type-selector label {
font-family: Roboto;
font-size: 13px;
font-weight: 300;
}

/code/pre
Add HTML component on the page. Set it's size to "auto" and "auto".
Details: http://prntscr.com/76tyxv/direct
Put inside this html component following HTML code:
Details: http://prntscr.com/76u1s8/direct

precode

<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas" style="height: 400px;"><>

/code/pre
Add "page show" event handler and populate it with following JS code:

precode

var markers = [];
var map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-33.8902, 151.1759),
new google.maps.LatLng(-33.8474, 151.2631));
map.fitBounds(defaultBounds);

// Create the search box and link it to the UI element.
var input = /** @type {HTMLInputElement} */(
document.getElementById('pac-input'));
map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

var searchBox = new google.maps.places.SearchBox(
/** @type {HTMLInputElement} */(input));

// [START region_getplaces]
// 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, 'places_changed', function() {
var places = searchBox.getPlaces();

if (places.length == 0) {
return;
}
for (var i = 0, marker; marker = markers; i++) {
marker.setMap(null);
}

// For each place, get the icon, place name, and location.
markers = [];
var bounds = new google.maps.LatLngBounds();
for (var i = 0, place; place = places; i++) {
var image = {
url: place.icon,
size: new google.maps.Size(71, 71),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(17, 34),
scaledSize: new google.maps.Size(25, 25)
};

// Create a marker for each place.
var marker = new google.maps.Marker({
map: map,
icon: image,
title: place.name,
position: place.geometry.location
});

markers.push(marker);

bounds.extend(place.geometry.location);
}

map.fitBounds(bounds);

});

/code/pre

Regards.

Thu Apr 13, 2017 7:12 pm

Hi Yuri , If I use this code , its working fine , but my map is zooming so much and i don't want the search box inside the map how to change the map size to look decent?, could you please send me the code ? it would be great help !

var defaultBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(-84.9, -180),
new google.maps.LatLng(84.9, 180));
map.fitBounds(defaultBounds);

this code shows the below output , I want it to be fitted decent and good looking. ! thanks in advance !

Thu Apr 13, 2017 7:13 pm

i want this to be changed !

Tue Apr 18, 2017 7:16 pm

Hello,

Please set a map property "zoom" for that: https://developers.google.com/maps/do...

Sun Nov 26, 2017 7:53 am

hello,
i am not getting output for this codes can u please u eloborate it

Mon Nov 27, 2017 2:12 pm

Hello,

Please check if there are any errors in the browser console. You can learn here: https://docs.appery.io/docs/using-bro... how to open the console.

Fri Dec 01, 2017 7:28 am

thank you so much serhii its working and helpful

Fri Dec 01, 2017 7:32 am

hai
i am having a doubt how to give present adress and destination adress and to calculate distance between to locations
And also if we want to reach a place giving that place as a remainder after reaching that place we want to get a message as a "you have reached the some city ....."
sir can u please send the code