IT Notes : Create Blogger-ready Leaflet (OSM) POI map using AI

 After uploading CSV file to AI platform, e.g.  Claude , enter the following prompt:

 Blogger-ready Leaflet (OSM) POI map using inlined POI data (no CSV fetching).

Render markers for each POI from the provided CSV (name, latitude, longitude, desc).

Use OpenStreetMap tiles as the base map.

Bind a popup to each marker showing the POI name and description.

Auto-fit the map bounds to include all markers.

Include HTML container <div id="map"> with a fixed height (e.g., 650px).

Load Leaflet CSS/JS from CDN (jsDelivr) and keep everything self-contained in one script block.

Use an escapeHtml() helper to prevent HTML injection in popups.

In Blogger, go to Posts → Edit (or New post).

Switch the editor to HTML mode:

Click “HTML” (next to Compose) or the <> icon (wording varies).

Copy everything from the first line

<!-- Blogger-ready Leaflet POI map ... -->

down to the last line </script>

Paste it into the post body in the HTML editor.

(Important) Keep the <div id="map" style="height: 650px;"></div> line exactly as-is.

Click Publish (or Preview) to test.

* This blogpost contains AI generated contents.