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?
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?
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.
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 !
Hello,
Please set a map property "zoom" for that: https://developers.google.com/maps/do...
hello,
i am not getting output for this codes can u please u eloborate it
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.
thank you so much serhii its working and helpful
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