How to integrate SearchBox in Google Maps JavaScript API v3?

Question

I would like to create a google map with search box on top like on this side: https://google-developers.appspot.com/... with the JavaScript API v3.

At the moment I use the following code to show a map by getting the latitude and longitude in the url (php get):

<?php

$latitude = $_GET['lat'];
$longitude = $_GET['long'];


?>
<!DOCTYPE html>
<html>
  <head>
  <script type="text/javascript">  
  </script>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }

      #search-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #target {
        width: 345px;
      }


    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {

          var input = document.getElementById('searchTextField');
          var image = 'pin.png';
          var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
        var mapOptions = {
          center: myLatlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: true,
        };




        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);


            var marker = new google.maps.Marker({
      icon: image,
      position: myLatlng,
      map: map,
      animation: google.maps.Animation.DROP,
      title:"You Location"

  });


      }
    </script>
  </head>
  <body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

But I don't get it, to integrate the Search Box like on the named site!!!

Can someone help?

I edited the code to this, but I doesn't work!:

<?php

$latitude = $_GET['lat'];
$longitude = $_GET['long'];


?>
<!DOCTYPE html>
<html>
  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }

      #search-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #target {
        width: 345px;
      }


    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXX&sensor=true">
    </script>
    <script type="text/javascript">
      function initialize() {

          var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds // have to be defined first
});

google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();
      // do your stuff here


          var input = document.getElementById('searchTextField');
          var image = 'pin.png';
          var myLatlng = new google.maps.LatLng(<?php echo "$latitude" ?>, <?php echo "$longitude" ?>);
        var mapOptions = {
          center: myLatlng,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          streetViewControl: true,
        };




        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);


            var marker = new google.maps.Marker({
      icon: image,
      position: myLatlng,
      map: map,
      animation: google.maps.Animation.DROP,
      title:"You Location"

      var input = document.getElementById('target');
        var searchBox = new google.maps.places.SearchBox(input);
        var markers = [];

        google.maps.event.addListener(searchBox, 'places_changed', function() {
          var places = searchBox.getPlaces();


  });

    }); 

      }
    </script>
  </head>
  <body onload="initialize()">
  <div id="search-panel">
      <input id="target" type="text" placeholder="Search Box">
    </div>
    <div id="map_canvas" style="width:100%; height:100%"></div>
  </body>
</html>

score 5 · Answer 1 · answered Oct 05 '12 at 12:06

5

You also have to load the Places Search Box:

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds // have to be defined first
});

Then you can listen to the places_changed event:

google.maps.event.addListener(searchBox, 'places_changed', function() {
      var places = searchBox.getPlaces();
      // do your stuff here
});

Have a look at the source code of the example page you posted to get an idea of what to do in there, for example drawing markers etc.

You can find more information in the SearchBox API Documentation.

answered Oct 05 '12 at 12:06

j0nes

8,041
3
37
40

Pls look @ my update, it doesn't work! :/// The search fild is displayed but no map is showing... – Laurenz Glück Oct 05 '12 at 12:49
@LaurenzGlück You have a lot of sintax errors in your code. For example, you are not closing the addListener call (put "});" after "// do your stuff here". – nicolascolman May 30 '17 at 18:06

Volkert Bobeldijk · Answer 2 · 2020-05-03T09:34:12.813

This is an old post. But in my code it works without the default bounds option. See the Google Maps Platform

So like this;

// 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); // <- like this

    map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);

    // Bias the SearchBox results towards current map's viewport.
    map.addListener('bounds_changed', function() {
      searchBox.setBounds(map.getBounds());
    });

How to integrate SearchBox in Google Maps JavaScript API v3?

2 Answers2

Linked