[Poll / Tracking Issue]: What examples would be most helpful to add?

[usefulthink]

We could use a bunch more examples in this library. But which ones to add?

Please comment below and vote on existing comments (using 👍 or similar) for what examples should be added and we'll track that here.

[usefulthink]

Create an autocomplete component

[usefulthink]

Using the Geocoder / PlacesService and other Maps API Services

[MauricioRobayo]

Creating custom controls.

https://developers.google.com/maps/documentation/javascript/controls#CustomControls

[charbeltabet]

Setting the map's viewport to contain given bounds using Map.fitBounds

https://developers.google.com/maps/documentation/javascript/reference/map#Map.fitBounds. Is this possible?

In my case const mapLibrary = useMapsLibrary('maps') is always null so the code never goes past the if (!mapLibrary) return; guard clause, maybe this feature is not implemented yet.

This may be how the fit bounds example looks like:

import { googleApiKey } from "~/config/constants";
import { map } from "lodash";
import { Bound } from "~/api/bounds";
import { useEffect } from "react";
import { APIProvider, useMapsLibrary, Map }  from '@vis.gl/react-google-maps';


export default function VisGlMap({ bounds }: { bounds: Bound[] }) {
  const center = {lat: bounds[0].latitude, lng: bounds[0].longitude };
  const zoom = 12;

  const mapLibrary = useMapsLibrary('maps');

  useEffect(() => {
    if (!mapLibrary) return;
    console.log('mapLibrary', mapLibrary)

    const mapBounds = mapLibrary.getBounds();

    map(bounds, (bound: Bound) => {
      const { latitude, longitude } = bound;
      const position = new mapLibrary.LatLng(latitude, longitude);
      mapBounds.extend(position);
    });

    mapLibrary.fitBounds(bounds);
  }, [mapLibrary])


  return (
    <APIProvider apiKey={googleApiKey}>
      <Map center={center} zoom={zoom} />
    </APIProvider>
  );
};

[MauricioRobayo]

In my case const mapLibrary = useMapsLibrary('maps') is always null so the code never goes past the if (!mapLibrary) return; guard clause

@charbeltabet Shouldn't useMapsLibrary be called within the context of the APIProvider?

[wangela]

Marker clustering (or should that be added as a feature request first?)

[chestermjr]

Marker clustering (or should that be added as a feature request first?)

There is this: https://github.com/visgl/react-google-maps/blob/main/examples/marker-clustering/src/app.tsx but it is a bit clunky.

[yestoall]

draw lines and polylines

[kwnevarez]

Step nine of this codelab might be helpful:
https://developers.google.com/codelabs/maps-platform/maps-platform-101-react-js#8

[KonstantinosVazaios]

Customizing the Marker element on the map

[wangela]

draw lines and polylines

@yestoall before an example can be added for this, the feature (component) needs to be added to the library. Please comment at #105 to indicate your interest in polylines!

[wangela]

Customizing the Marker element on the map

@KonstantinosVazaios What customizations would you like to see which are not already demonstrated in https://visgl.github.io/react-google-maps/examples/markers-and-infowindows ?

[KonstantinosVazaios]

@wangela Have the ability to pass any React Component as the map marker. In other words I would like to see examples of replacing this boring red marker with a custom component, img or something like this😄

[alexander-densley]

Please please please please add more details on using the useAutocomplete hook, I've spent so many hours on it and it is just not working.

[usefulthink]

@alexander-densley sorry to hear that. We will probably remove the autocomplete hook for the 1.0 version and replace it with a sample implementation in examples until we are more clear on what kind of autocomplete hook or component we want to support for the future... See also #18 and https://visgl.github.io/react-google-maps/docs/contributing#goals-and-philosophy

[afdza3]

Choropleth map