Get started with places.js CDN

MIT licensed

Places.js is a lightweight library for working with geolocation and maps in JS.

Tags:
  • algolia
  • geo
  • search
  • place
  • input

Stable version

Copied!

How to start using places.js CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with places.js CDN - cdnhub.io</title>
  <style>
    #map {
      height: 400px;
      width: 100%;
    }
  </style>
  <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>
  <script src="https://cdn.cdnhub.io/places.js/1.19.0/places.min.js"></script>
</head>
<body>
  <div id="map"></div>
  <script>
    const input = document.createElement('input');
    input.type = 'text';
    input.id = 'search';
    document.body.appendChild(input);

    const map = new google.maps.Map(document.getElementById('map'), {
      center: { lat: 40.7128, lng: -74.0060 },
      zoom: 12,
    });

    const autocomplete = new google.maps.places.Autocomplete(input);
    autocomplete.bindToMap(map);

    const places = new Places.Autocomplete(input);
    places.setTypes(['address']);

    places.addListener('place_changed', () => {
      const place = autocomplete.getPlace();
      if (place.geometry) {
        map.setCenter(place.geometry.location);
      }
    });
  </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!
Copied!

All versions