Working example of angular-google-maps search function

Question

Does anyone have an example of a working search box like the one the angular-google-maps-team is showing under 'search-box' on this site: https://angular-ui.github.io/angular-google-maps/#!/api

If you write something it sure does find it in a dropdown, but when you press enter, the map doesn't respond. - How can you make the map move to the correct location when you hit enter?

Malediction

Answer 1

html:

<ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true">
    <ui-gmap-search-box template="searchbox.template" events="searchbox.events" position="BOTTOM_RIGHT"></ui-gmap-search-box>
    <ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id">
</ui-gmap-google-map>

js controller:

$scope.map = {
    "center": {
        "latitude": 52.47491894326404,
        "longitude": -1.8684210293371217
    },
    "zoom": 15
}; //TODO:  set location based on users current gps location 
$scope.marker = {
    id: 0,
    coords: {
        latitude: 52.47491894326404,
        longitude: -1.8684210293371217
    },
    options: { draggable: true },
    events: {
        dragend: function (marker, eventName, args) {

            $scope.marker.options = {
                draggable: true,
                labelContent: "lat: " + $scope.marker.coords.latitude + ' ' + 'lon: ' + $scope.marker.coords.longitude,
                labelAnchor: "100 0",
                labelClass: "marker-labels"
            };
        }
    }
};
var events = {
    places_changed: function (searchBox) {
        var place = searchBox.getPlaces();
        if (!place || place == 'undefined' || place.length == 0) {
            console.log('no place data :(');
            return;
        }

        $scope.map = {
            "center": {
                "latitude": place[0].geometry.location.lat(),
                "longitude": place[0].geometry.location.lng()
            },
            "zoom": 18
        };
        $scope.marker = {
            id: 0,
            coords: {
                latitude: place[0].geometry.location.lat(),
                longitude: place[0].geometry.location.lng()
            }
        };
    }
};
$scope.searchbox = { template: 'searchbox.tpl.html', events: events };

Rennes

can we put a search box outside the map tags ? (ui-gmap-google-map) – Proselytize

@Sekai you can achieve this by adding parentdiv="'{string}'" to the <ui-gmap-search-box>. This will append the search box at the target div. See angular-google-maps API. Note the syntax. A target div of id="searchfield-container" would be adressed like parentdiv="'searchfield-container'" – Toomer

Yes but you will always have to create a map first :) – Proselytize

what is template: 'searchbox.tpl.html'? should we create one in our project? – Vortumnus

This isn't a complete example, it relies on templates that aren't posted. – Celsacelsius

The template can be placed outside the <ui-google-map> in a script tag like so: <script type="text/ng-template" id="searchbox.tpl.html"> <input type="text" placeholder="Search Box"> </script> – Jerrome

Thanks for this answer! How the heck are you supposed to figure this out by yourself, it's literally documented nowhere. – Honduras

Answer 2

I suggest you look at examples sent to angular-google-maps github.

There's a piece of JavaScript lacking in 123Tax response which is found at https://github.com/angular-ui/angular-google-maps/blob/master/example/assets/scripts/controllers/search-box.js

And this snippet is loaded in https://github.com/angular-ui/angular-google-maps/blob/master/example/search-box.html

Nolita

Answer 3

// the following controls the map in your Controller
$scope.map = { control: {}, center: { latitude: 37.70, longitude: -122.344 }, zoom: 9, refresh: {}};

function placeToMarker(searchBox, id) {

  var place = searchBox.getPlaces();
  if (!place || place == 'undefined' || place.length == 0) {
    return;
  }

  var marker = {
    id: id,
    place_id: place[0].place_id,
    name: place[0].name,
    address: place[0].formatted_address,
    latitude: place[0].geometry.location.lat(),
    longitude: place[0].geometry.location.lng(),
    latlng: place[0].geometry.location.lat() + ',' + place[0].geometry.location.lng()
  };
// push your markers into the $scope.map.markers array
if (!$scope.map.markers) {
    $scope.map.markers = [];
  }

// THIS IS THE KEY TO RECENTER/REFRESH THE MAP, to your question
$scope.map.control.refresh({latitude: marker.latitude, longitude: marker.longitude});

// the following defines the SearchBox on your Controller; events call placeToMarker function above
var searchBoxEvents = {
  places_changed: function (searchBox) {
    placeToMarker(searchBox, id);
  }
};

// this is defined on the Controller, as well. This specifies which template searchBoxEvents should match to; note the parentdiv
  $scope.searchBox = { template:'searchBox.template.html', events:searchBoxEvents, parentdiv: 'searchBoxParent'};

// in your HTML, declare where you want the searchBox. parentdiv: 'searchBoxParent' above looks for the id="searchBoxParent" in HTML
<div class="col-xs-12 col-md-12" id="searchBoxParent">
  <script type="text/ng-template" id="searchBox.template.html">
    <input type="text" ng-model="address" placeholder="Search Address" required />
  </script>
</div>

//Lastly, in HTML, make sure you wrap ui-gmap-search-box & ui-gmap-markers in ui-gmap-google-map
<ui-gmap-google-map id="map-canvas" center="map.center" zoom="map.zoom" draggable="true" options="options" control="map.control">
    <ui-gmap-search-box template="searchBox.template" events="searchBox.events" parentdiv="searchBox.parentdiv"></ui-gmap-search-box>
    <ui-gmap-markers idkey="map.idkey" models="map.markers" coords="'self'" icon="'icon'" click="'onClicked'" fit="true"></ui-gmap-markers>
  </ui-gmap-google-map>

Toft

Where do you want the placeToMarker function to end? – Malediction

what is template here. whats its role? – Vortumnus

Answer 4

Gavin's answer is correct,just some more details about the 'searchbox.tpl.html of his example. It has to be placed outside of the directive like this:

<body>
    <div id="searchBoxParent"></div>
    <div id="map_canvas" ng-controller="mainCtrl">
    <script type="text/ng-template" id="searchbox.tpl.html">
        <input type="text" placeholder="Search Box">
    </script>
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="options">
        <ui-gmap-search-box template="searchbox.template" events="searchbox.events" parentdiv="searchbox.parentdiv"></ui-gmap-search-box>
    </ui-gmap-google-map>
</div>
<!--example-->
</body>

Working plunkr: http://embed.plnkr.co/1rpXQhcZqwJ7rv0tyK9P/ (for some reason the plunkr only worked in chrome for me but not in firefox)

I could not comment on Gavin's answer because of lack of repution, this is why I add the info as additional answer.

Ybarra