Convert address into coordinates for Google Maps Local Context (Geocoding + Local Context Maps)

I am attempting to plug Google Maps Local Context into my website, and I am looking to use an address string (1234 Main St, City, State, USA) to center and display a marker on my map.

Here's the code I have that displays a simple map on the site, but I need help getting an address to work instead of coordinates.

I have to use Geocoder, but I need help tying it together with the Google Maps Local Context map.

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  const center = { lat: 37.4219998, lng: -122.0840572 };
  map = localContextMapView.map;
  new google.maps.Marker({ position: center, map: map });
  map.setOptions({
    center: center,
    zoom: 14,
  });
}

https://jsfiddle.net/cegytdj6/

code snippet:*

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  const center = {
    lat: 37.4219998,
    lng: -122.0840572
  };
  map = localContextMapView.map;
  new google.maps.Marker({
    position: center,
    map: map
  });
  map.setOptions({
    center: center,
    zoom: 14,
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>

Solution

See the simple geocoder example for how to use the geocoder in the Google Maps Javascript API v3. The code below will use the geocoder to return the coordinates for "1600 Amphitheatre Parkway, Mountain View, CA".

let geocoder = new google.maps.Geocoder();
  geocoder.geocode({ address: "1600 Amphitheatre Parkway, Mountain View, CA" }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
  new google.maps.Marker({ position: center, map: map });
  map.setOptions({
    center: center,
    zoom: 14,
  });

putting that into your existing code:

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: "1600 Amphitheatre Parkway, Mountain View, CA"
  }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
      new google.maps.Marker({
        position: center,
        map: map
      });
      map.setOptions({
        center: center,
        zoom: 14,
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

updated fiddle

code snippet:

let map;

function initMap() {
  const localContextMapView = new google.maps.localContext.LocalContextMapView({
    element: document.getElementById("map"),
    placeTypePreferences: ["restaurant", "tourist_attraction"],
    maxPlaceCount: 12,
  });
  map = localContextMapView.map;
  let geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    address: "1600 Amphitheatre Parkway, Mountain View, CA"
  }, (results, status) => {
    if (status === "OK") {
      const center = results[0].geometry.location;
      map.setCenter(center);
      new google.maps.Marker({
        position: center,
        map: map
      });
      map.setOptions({
        center: center,
        zoom: 14,
      });
    } else {
      alert("Geocode was not successful for the following reason: " + status);
    }
  });
}

/* Always set the map height explicitly to define the size of the div
       * element that contains the map. */

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<!DOCTYPE html>
<html>

<head>
  <title>Local Context Basic</title>
  <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>
  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&libraries=localContext&v=beta" defer></script>
  <!-- jsFiddle will insert css and js -->
</head>

<body>
  <div id="map"></div>
</body>

</html>