1

I have a problem when using Google Maps Api Key with a Search box. The maps can show but when i type some words into search box, nothing happened.

This is my code:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Places Searchbox</title>
    <style>
        html, body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
        }

        .controls {
            margin-top: 10px;
            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: 300px;
        }

            #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;
            }

        #target {
            width: 345px;
        }
    </style>
</head>
<body>
    <input id="pac-input" class="controls" type="text" placeholder="Search Box">
    <div id="map"></div>
    <script>

    function initAutocomplete() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -33.8688, lng: 151.2195},
          zoom: 13,
          mapTypeId: google.maps.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);
        map.controls[google.maps.ControlPosition.TOP_LEFT].push(input);

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

        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) {
            return;
          }

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

          // For each place, get the icon, name and location.
          var bounds = new google.maps.LatLngBounds();
          places.forEach(function(place) {
            var icon = {
              url: place.icon,
              size: new google.maps.Size(71, 71),
              origin: new google.maps.Point(0, 0),
              anchor: new google.maps.Point(17, 34),
              scaledSize: new google.maps.Size(25, 25)
            };

            // Create a marker for each place.
            markers.push(new google.maps.Marker({
              map: map,
              icon: icon,
              title: place.name,
              position: place.geometry.location
            }));

            if (place.geometry.viewport) {
              // Only geocodes have viewport.
              bounds.union(place.geometry.viewport);
            } else {
              bounds.extend(place.geometry.location);
            }
          });
          map.fitBounds(bounds);
        });
      }

    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBoHGi6ROnyyKd1AsQA-ShDMMBUcXeruIk&libraries=places&callback=initAutocomplete"
            async defer></script>
</body>
</html>

This is Error enter image description here

And this keys:

enter image description here

Please help me to solve this problem.

Thank in advanced

MyNguyen
  • 319
  • 4
  • 14
  • Have you enabled the Google Maps Javascript API v3 for that key? What is the warning indicated next to your key (the yellow triangle with the exclamation point in it)? – geocodezip Jul 02 '16 at 02:47
  • @ geocodezip: this warning require a domain , but i think it is not the problem. i tried to set LocaHost domain for it, but it does not work. – MyNguyen Jul 02 '16 at 03:58
  • It's not working. You are getting a warning. I would think that would indicate a problem. The only other thing would be if you haven't enabled the Google Maps JavaScript API for that key/project. – geocodezip Jul 02 '16 at 04:01

2 Answers2

1

Are you sure that the API key is set up to allow access from localhost.

Try changing the following in your address bar from:

http://localhost:49812/HtmlPage1.html

to 

http://127.0.0.1:49812/HtmlPage1.html

If that doesn't work go to the google console, click the server key you are using and in "Accept requests from these server IP addresses" make sure 127.0.0.1 is in the list.

David Cusack
  • 146
  • 3
-1

Make sure these APIs are enabled enter image description here

Ahmed Mansour
  • 527
  • 5
  • 13