shabeer
Posts: 0
Joined: Thu Mar 12, 2015 2:46 pm

Places search box

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...

Yurii Orishchuk
Posts: 0
Joined: Fri Feb 14, 2014 8:20 am

Places search box

Hi Shabeer,

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

  1. 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

  2. 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

  3. Add HTML component on the page. Set it's size to "auto" and "auto".
    Details: http://prntscr.com/76tyxv/direct

  4. 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

  5. Add "page show" event handler and populate it with following JS code:

    precode

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

    var defaultBounds = new google&#46;maps&#46;LatLngBounds(
    new google&#46;maps&#46;LatLng(-33&#46;8902, 151&#46;1759),
    new google&#46;maps&#46;LatLng(-33&#46;8474, 151&#46;2631));
    map&#46;fitBounds(defaultBounds);

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

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

    &#47;&#47; [START region_getplaces]
    &#47;&#47; Listen for the event fired when the user selects an item from the
    &#47;&#47; pick list&#46; Retrieve the matching places for that item&#46;
    google&#46;maps&#46;event&#46;addListener(searchBox, 'places_changed', function() {
    var places = searchBox&#46;getPlaces();

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

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

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

    markers&#46;push(marker);

    bounds&#46;extend(place&#46;geometry&#46;location);
    }

    map&#46;fitBounds(bounds);

    });

    /code/pre

    Regards.

Manasa Pochampally
Posts: 0
Joined: Tue Dec 20, 2016 12:09 am

Places search box

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 !

Manasa Pochampally
Posts: 0
Joined: Tue Dec 20, 2016 12:09 am

Places search box

Image

i want this to be changed !

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Places search box

Hello,

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

sai
Posts: 0
Joined: Sun Nov 26, 2017 7:53 am

Places search box

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

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Places search box

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.

sai
Posts: 0
Joined: Sun Nov 26, 2017 7:53 am

Places search box

thank you so much serhii its working and helpful

sai
Posts: 0
Joined: Sun Nov 26, 2017 7:53 am

Places search box

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

Return to “Issues”