Google Places API example

javascript html google-maps google-maps-api-3

28,503

Solution 1

JS field doesn't accept Google Maps API library for external resources. (I'm not sure why) So you need to insert <script>tag into the body field.

And JS field generates "window.onload" automatically. You don't have to write "google.maps.event.addDomListener" in JS field.

enter image description here http://jsfiddle.net/wf9a5m75/NpYwE/27/

<div id="panel" style="margin-left: -260px">
    <input id="searchTextField" type="text" size="50">
    <input type="radio" name="type" id="changetype-all" checked="checked">
    <label for="changetype-all">All</label>
    <input type="radio" name="type" id="changetype-establishment">
    <label for="changetype-establishment">Establishments</label>
    <input type="radio" name="type" id="changetype-geocode">
    <label for="changetype-geocode">Geocodes</lable>
</div>
<div id="map-canvas"></div>
        <script src="http://maps.google.com/maps/api/js?sensor=false&libraries=places"></script>

Solution 2

You will notice the errors in the javascript console:

Failed to load resource: the server responded with a status of 404 (Not Found) http://fiddle.jshell.net/maps/documentation/javascript/examples/default.css
Uncaught ReferenceError: google is not defined fiddle.jshell.net/agconti/NpYwE/show/:133

You aren't including the google API script correctly on the fiddle.

28,503

Author by

agconti

"Doing is better than Perfect" My favorite questions / answers : Why is appending to an element not yet in the DOM faster than using a javascript Fragment? Is obj.style.WebkitTransform = “rotate(”+degree+“deg)”; very accurate? How to get the length of words in a sentence? Django rest framework - including url for authentication JavaScript: Is it possible to replace functions like Array.prototype.indexOf?

Updated on July 09, 2022

Comments

agconti almost 2 years

The Problem

I've been trying to get this google maps API example working but after copying the code exactly from google's site, the example fails to render properly. ie the map completely fails to render, search bar is -350px of the page ect.

To see what I mean, check out this JSfiddle.

The example works great on Google's above mentioned documentation page, so I know its something I'm doing. Any ideas?

EDIT: I got the css from google's site, but still the problem persists.

Below is the code causing the problems:

<!DOCTYPE html>
<html>
  <head>
    <title>Places Autocomplete</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <link href="CSS/default.css" rel="stylesheet">
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>

    <style>
      input {
        border: 1px solid  rgba(0, 0, 0, 0.5);
      }
      input.notfound {
        border: 2px solid  rgba(255, 0, 0, 0.4);
      }
    </style>

    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(-33.8688, 151.2195),
    zoom: 13,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  var input = /** @type {HTMLInputElement} */(document.getElementById('searchTextField'));
  var autocomplete = new google.maps.places.Autocomplete(input);

  autocomplete.bindTo('bounds', map);

  var infowindow = new google.maps.InfoWindow();
  var marker = new google.maps.Marker({
    map: map
  });

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    infowindow.close();
    marker.setVisible(false);
    input.className = '';
    var place = autocomplete.getPlace();
    if (!place.geometry) {
      // Inform the user that the place was not found and return.
      input.className = 'notfound';
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);  // Why 17? Because it looks good.
    }
    marker.setIcon(/** @type {google.maps.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(35, 35)
    }));
    marker.setPosition(place.geometry.location);
    marker.setVisible(true);

    var address = '';
    if (place.address_components) {
      address = [
        (place.address_components[0] && place.address_components[0].short_name || ''),
        (place.address_components[1] && place.address_components[1].short_name || ''),
        (place.address_components[2] && place.address_components[2].short_name || '')
      ].join(' ');
    }

    infowindow.setContent('<div><strong>' + place.name + '</strong><br>' + address);
    infowindow.open(map, marker);
  });

  // Sets a listener on a radio button to change the filter type on Places
  // Autocomplete.
  function setupClickListener(id, types) {
    var radioButton = document.getElementById(id);
    google.maps.event.addDomListener(radioButton, 'click', function() {
      autocomplete.setTypes(types);
    });
  }

  setupClickListener('changetype-all', []);
  setupClickListener('changetype-establishment', ['establishment']);
  setupClickListener('changetype-geocode', ['geocode']);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="panel" style="margin-left: -260px">
      <input id="searchTextField" type="text" size="50">
      <input type="radio" name="type" id="changetype-all" checked="checked">
      <label for="changetype-all">All</label>

      <input type="radio" name="type" id="changetype-establishment">
      <label for="changetype-establishment">Establishments</label>

      <input type="radio" name="type" id="changetype-geocode">
      <label for="changetype-geocode">Geocodes</lable>
    </div>
    <div id="map-canvas"></div>
  </body>
</html>