Google – Places search box

This example adds a search box to a map, using the Google Place Autocomplete feature. People can enter geographical searches. The search box will return a pick list containing a mix of places and predicted search terms. This example requires the Places library. Include the libraries=places parameter when you first load the API. For example:

 <script src="">. 


var map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: -33.8688, lng: 151.2195},
    zoom: 13,
    mapTypeId: 'roadmap'

  // Create the search box and link it to the UI element.
  var input = document.getElementById('pac-input');
  var searchBox = new google.maps.places.SearchBox(input);
  var markers = [];
  // Listen for the event fired when the user selects a prediction and retrieve
  // more details for that place.
  searchBox.addListener('places_changed', function() {
    var places = searchBox.getPlaces();
    if (places.length == 0) {

    // Clear out the old markers.
    markers.forEach(function(marker) {
    markers = [];

    // For each place, get the icon, name and location.
    var bounds = new google.maps.LatLngBounds();
    places.forEach(function(place) {
      if (!place.geometry) {
        console.log("Returned place contains no geometry");
      // Create a marker for each place.
      markers.push(new google.maps.Marker({
        map: map,
        position: place.geometry.location

      if (place.geometry.viewport) {
        // Only geocodes have viewport.
      } else {


Published by


My passion became my profession , I'm a driven, energetic and proactive tech professionally. I consider myself an engagement professional, as I don't simply provide solutions, I create them. I am a continuous learner – always looking for new technologies, in my spare time I search Google for the latest trends . I like to think of myself as a futurist and I'm a Full Stack JavaScript Developer. >> Skills << ✔ Web App Development ✔ Strong Javascript ✔ Backbone.js, Angular.js, Dojo.js ✔ jQuery.js ✔ Node.js ✔ MongoDb , MySql ✔ / Web Sockets (Native) ✔ PHP ✔ Ruby (Watir - Automation) ✔ Grunt ✔ Github , Bitbucket , SVN ✔ Agile Process ✔ Scrum ✔ Ability to research and adapt new techs ✔ Fast Learner ✔ Always Punctual ✔ Critical Thinker ✔ Friendly Personality

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s