# google-maps

3 min read, 521 words google maps api places autocomplete

# Google Map platform GMP (opens new window)

# What can it do?

get directions
draw custom maps
lookup a place, geocoding and geolocation

API_kEY

is public available on website, requirnment of google Maybe limit it to the domain of the website, so that not everyone can use it!

# MAPS API

visibility features, colors, dark mode
Markers and shapes
Custom graphics
animations
Data layer (static, dynamic js content)

# Places API

place predictions, autocomplete
Address components
geocoding
geolocation
ratings
reviews

can I use autocomplete HTML attribute ? (opens new window)

# How to use it? JS Implementations ?

Bootstrap google api JS sdk js-api-loader (opens new window)
Make your own implementation using web API standard

CORS

Google intentionally doesn’t allow access to the Google Maps API by way of requests sent with axios or AJAX methods in other such libraries, nor directly with XHR or the Fetch API.

Google Maps API: No 'Access-Control-Allow-Origin' header is present on the requested resource (opens new window)

import { useEffect } from "react";

// USAGE: useScript('https://use.typekit.net/foobar.js');
const useScript = (url) => {
  useEffect(() => {
    const script = document.createElement("script");
    script.src = url;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [url]);
};

export default useScript;
// generic to more specific => useGoogleMapScript() already knows src url

# 3rd party libraries

library	what does it do?
googlemaps/js-api-loader (opens new window)	creates a single (with id) script tag for google-maps
PlacesAutocomplete (opens new window)	expects a render props function as props.children
google maps react hooks (opens new window)	react context + custom hooks based pure react solution
vanilla JS	look for event and define right callback from google map API

# Google Map React Hooks GMRH (opens new window)

Exposing google maps functionality using react hooks (context + custom hooks)

Inject remove and google-map script on page. After load provide object to be used

# FAQ

Difference between Google's Query and Place Autocomplete? (opens new window)
diff b/w document and window onload (opens new window)
onload event could be listened for every element
What is the difference between autocomplete and AutocompleteService ? one is GUI with google widget, other is more text oriented, code-only version
- Plus Code, places which do not have a address yet! 698H+PX
Add script in head vs body? (opens new window)
- dependes on what is script supposed to do? Functions in head. If it changes HTML DOM then in body, bottom!

Script tag

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Google Maps</title>

  <style>
    body {
      background-color: lightgray;
    }

    h2 {
      color: brown;
    }

    input {
      width: 500px
    }
  </style>

  <!-- dynamically inject script onMount and remove onUnmount -->
  <script type="text/javascript"
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB-OZ5uC6AKNkYRX0e5naFKr7xoS0RCdsg&libraries=places&callback=initAutocomplete"
    defer async></script>
</head>

<body>
  <h2>Google Maps Autocomplete</h2>
  <input id="autocomplete" placeholder="Enter a place_changed" type="text" autocomplete="on" width: 500px; />
  <pre id="details">... selected </pre>

  <script>
    let autocomplete; w
    function initAutocomplete() {
      autocomplete = new google.maps.places.Autocomplete(
        document.getElementById("autocomplete"),
        {
          types: ['address'],
          componentRestrictions: { 'country': ['DE'] },
        })

      autocomplete.addListener('place_changed', onPlaceChanged)
    }

    function onPlaceChanged() {
      var place = autocomplete.getPlace()
      if (!place.geometry) {
        document.getElementById("autocomplete").placeholder = 'Enter a place'
      } else {
        document.getElementById("details").innerHTML = JSON.stringify(place, null, 2)
        // document.getElementById("details").innerHTML = place.name
      }

    }
  </script>
</body>

</html>

← Github API v3