Use map with marker already

[ElBidouilleur]

Hello,

My client wants a map. To do this, he gave me a link to a Google My Map with markers already placed on it. I can't find in the documentation how to add this map and display my client's markers without having to enter them manually in my app, as he will be adding new points from time to time.

Have a nice day, and thank you in advance.

[usefulthink]

Unfortunately, this doesn't work with this library (but it's actually an interesting Idea). You would need to have the positions (lat/lng) for the markers to add them to a map.

However, you can embed the map from mymaps into your site via an iframe. You get the embed-code with the "Share > Embed on my site" when viewing the map.

There is also the option to export the map as kml, which will give you an kml file with the data from the map. You can then either write a small script to convert that to json to use it in your application or maybe even use it directly with the google.maps.KmlLayer.

[chama-x]

Best practical approach: export your Google My Map as KML, then load it with google.maps.KmlLayer:

const mapOptions = {
  zoom: 10,
  center: { lat: 40.7128, lng: -74.0060 }
};

const kmlUrl = 'https://your-server.com/maps/mymap.kml';

<GoogleMap mapContainerStyle={{height: '100vh'}} options={mapOptions}>
  {/* KmlLayer component or direct API usage */}
  <div id="map" />
</GoogleMap>

Or use the Marker API:

const layer = new google.maps.KmlLayer({
  url: kmlUrl,
  map: map,
});

Make sure your KML file is CORS-enabled on your server. Also note that KML files need to be publicly accessible (not behind auth).

If you can't export as KML, you'd need to manually extract lat/lng data from your My Map and create markers programmatically - no way around it unfortunately.