Wednesday, 19 November 2025

Getting Started with UniMap Elements: A Step-by-Step Guide Using Custom HTML Components

Standard

 


Here the magic is No JavaScript required. Just write HTML for <Unimap></Unimap>.

When we think of map integrations, we imagine JavaScript-heavy code, SDK loading, event listeners, callbacks, async handling… and a lot of rework every time the mapping provider changes.

UniMap Elements flips this upside down.

It gives you a set of Custom HTML Elements like:

<unimap-map>
<unimap-marker>
<unimap-route>
<unimap-geocode>

…which work across Google Maps, Mapbox, OpenStreetMap, Bing, HERE, TomTom, Mappls and many more  with zero JavaScript.

This means:

  • You can build maps like writing simple HTML.
  • You can switch providers instantly by changing one attribute.
  • It works beautifully even inside frameworks (React, Vue, Next.js, Astro, Webflow, Blogger templates, etc.).

Let’s build your first UniMap Elements project.

1. Add UniMap Elements to Your Page

Just drop one script:

<script src="https://cdn.jsdelivr.net/npm/unimap-elements@latest/unimap-elements.js" type="module"></script>

This gives you access to all UniMap Web Components.

2. Create Your First Map (In Just HTML)

<unimap-map
  provider="google"
  api-key="YOUR_GOOGLE_KEY"
  width="100%"
  height="500px"
  zoom="10"
  lat="40.7128"
  lng="-74.0060">
</unimap-map>

That’s it.
You now have a Google Map rendering magically.

Output:



3. Adding Markers (ZERO JavaScript)

Just place <unimap-marker> inside <unimap-map>.

<unimap-map provider="google" api-key="YOUR_KEY" height="500px" lat="40.7128" lng="-74.0060">

  <unimap-marker 
    lat="40.7128" 
    lng="-74.0060"
    title="New York City"
    color="#ff0000">
  </unimap-marker>

</unimap-map>

You can add unlimited markers the same way.

4. Adding Custom HTML Markers

Use the html attribute for styled HTML markers.

<unimap-marker 
  lat="40.73061" 
  lng="-73.935242"
  html='
    <div style="background:#0d6efd;padding:6px 10px;color:#fff;border-radius:20px">
      Custom Marker
    </div>
  '>
</unimap-marker>

No JS. No event listeners. Still works across all map providers.

5. Drawing Routes in HTML

UniMap Elements lets you draw routes visually:

<unimap-route 
  stroke-color="#ff0000"
  stroke-width="4"
  points='[
    {"lat":40.7128,"lng":-74.0060},
    {"lat":40.7589,"lng":-73.9851},
    {"lat":40.7484,"lng":-73.9857}
  ]'>
</unimap-route>

Just pass an array of points.

6. Drawing Shapes (Circle, Polygon, Polyline)

Circle

<unimap-circle 
  lat="40.7128"
  lng="-74.0060"
  radius="1000"
  fill-color="#4285F4"
  fill-opacity="0.2">
</unimap-circle>

Polygon

<unimap-polygon 
  points='[
    {"lat":40.72,"lng":-74.00},
    {"lat":40.72,"lng":-73.98},
    {"lat":40.70,"lng":-73.98},
    {"lat":40.70,"lng":-74.00}
  ]'
  stroke-color="#00ff00"
  fill-color="#00ff00"
  fill-opacity="0.3">
</unimap-polygon>

Polyline

<unimap-polyline
  stroke-color="#8a2be2"
  stroke-width="3"
  points='[
    {"lat":40.702,"lng":-74.009},
    {"lat":40.706,"lng":-73.997},
    {"lat":40.712,"lng":-73.985}
  ]'>
</unimap-polyline>

7. Geocoding (Search an Address Using HTML)

Use:

<unimap-geocode 
  query="Statue of Liberty, New York"
  on-result="handleResult">
</unimap-geocode>

<script>
  function handleResult(event) {
    console.log("Geocode Result:", event.detail);
  }
</script>

This makes geocoding possible without calling APIs manually.

8. Reverse Geocoding (lat/lng → Address)

<unimap-reverse-geocode 
  lat="40.7128"
  lng="-74.0060"
  on-result="printAddress">
</unimap-reverse-geocode>

<script>
function printAddress(e) {
  console.log("Address:", e.detail);
}
</script>

Results come via a simple event.

9. Directions Using HTML

<unimap-directions
  origin='{"lat":40.7128,"lng":-74.0060}'
  destination='{"lat":40.7589,"lng":-73.9851}'
  mode="driving"
  on-result="showDirections">
</unimap-directions>

<script>
function showDirections(e) {
  console.log("Directions:", e.detail);
}
</script>

You get structured direction steps automatically.

10. Listening to Map Events Using Attributes

You can capture map clicks like this:

<unimap-map 
  provider="google"
  api-key="YOUR_KEY"
  lat="40.7128"
  lng="-74.0060"
  on-map-click="handleMapClick">
</unimap-map>

<script>
function handleMapClick(e) {
  const { lat, lng } = e.detail;
  console.log("Clicked at:", lat, lng);
}
</script>

Same syntax works for:

  • on-marker-click
  • on-map-move
  • on-map-ready
  • on-shape-click
  • etc.

11. Switching Providers by Changing ONE Attribute

This:

provider="google"

can be changed to:

provider="mapbox"
provider="osm"
provider="bing"
provider="here"
provider="tomtom"
provider="mapmyindia"

Your entire HTML map remains identical.

  • No refactoring.
  • No JS changes.
  • No SDK rewrites.
  • Total freedom.


e.g Output for OSM?:

Why UniMap Elements Is a Game Changer

✔ Zero JavaScript required

Perfect for designers, low-code builders, bloggers, and frontend devs.

✔ Works anywhere

Static HTML, WordPress, Blogger, Webflow, Astro, React, Vue, Next.js — everything.

✔ One map → Any provider

Ultimate future-proof mapping.

✔ Fastest prototyping experience

You can build a full app by copy-pasting components.

✔ Perfect for Infotainment Systems & Browser-Based Apps

Works even in restricted WebView environments.

UniMap Elements brings HTML-first mapping to the modern web.

  • No SDK headaches.
  • No vendor-specific APIs.
  • Just clean, declarative components that work everywhere.
Bibliography