Adding A Place Search Box To A Google Map

You have drawn a lovely map using the Google Maps API - now make it easier for the user to find places

The Basics Of Adding A Place Search

Adding a place search to an existing map is not difficult. The HTML is as simple as specifying where the map is to be drawn <div id = 'map-canvas'> and an <input> tag providing the entry mechanism for the desired place name. Nothing special is needed for the CSS classes/IDs, just apply whatever styling, sizing etc you need. The <script> that calls up the Google Maps API needs to invoke the places library ie libraries=places added to the string normally used. When something is typed into the input field, the matching places are automatically listed below, allowing the user to click on one of the suggestions and the map will change to that place, scaled appropriately for the place e.g. a city will have less zoom than a village.

HTML5

<div id='map-container'>
  <input id = 'place-search'
        class='controls'
        type='text'
        placeholder='Enter a place...'>
  <div id = 'map-canvas'></div>
</div>
<script src='https://maps.googleapis.com/maps/api/js?libraries=places&amp;sensor=false'></script>
 

Implementing Place Search

The input box is positioned using the 'controls' facility and can be placed at a variety of positions, here TOP LEFT. Note that this position will be automatically moved if it conflicts with something that Google wants to display e.g. a logo. Binding the autocomplete facility to the map area or 'bounds' currently displayed ,means that the places suggested will be preferentially aligned with this area. For example if there are lots of places called Googleville in the world, those in or near to the currently displayed area will be displayed first in the list. Next a listener is set up to fire when the place is elected by the user and at this point you can perform whatever actions are appropriate for your application. Here a test is made to see whether the selected place has 'geometry' defined and if so the map is zoomed to display the bounds defined for the place. For example a city will show a larger area than a village. If no viewport is defined for the selected place the map is centred to the place's location and an appropriate zoom level set.

JAVASCRIPT

function displayMap() {
  var mapId=document.getElementById("map-canvas");
  var map = new google.maps.Map(mapId, {
    center: new google.maps.LatLng(0, 0),
    zoom: 2,
    mapTypeId: google.maps.MapTypeId.ROADMAP
          });
  /* Create the place search box*/
  var input = (document.getElementById('place-search'));
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);
  var autocomplete = new google.maps.places.Autocomplete(input);
  google.maps.event.addListener(
                        autocomplete,
                        'place_changed',
                        function() {
    autocomplete.bindTo('bounds', map);
    var place = autocomplete.getPlace();
    if (!place.geometry) {
       return;
    }
/* if the place has a defined viewport, use it else*/
/*set the centre of the map to the place selected and zoom in*/
    if (place.geometry.viewport) {
       map.fitBounds(place.geometry.viewport);
    } else {
       map.setCenter(place.geometry.location);
       map.setZoom(12);
    }
  });
}
google.maps.event.addDomListener(window, 'load', displayMap);