Skip to main content

​
Marker

The Marker component displays markers (pins) on the map at specific coordinates. Supports custom icons, labels, and drag behavior.

​
Props

​
position
{ lat: number; lng: number }
required
Marker position coordinates
​
label
string
Text label to display on the marker
​
draggable
boolean
default:false
Enable drag behavior for the marker
​
icon
string
URL to custom icon image
​
iconSize
{ w: number; h: number }
Custom icon size in pixels
​
iconAnchor
{ x: number; y: number }
Icon anchor point (where the icon points to on the map)
​
onDragEnd
(event: H.mapevents.Event) => void
Callback fired when marker drag ends

​
Basic Usage

import { HereMap, Marker } from '@rodrito/react-here-maps';

function MapWithMarker() {
  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 40.7128, lng: -74.0060 }, zoom: 12 }}
    >
      <Marker
        position={{ lat: 40.7128, lng: -74.0060 }}
        label="New York City"
      />
    </HereMap>
  );
}

​
Multiple Markers

const cities = [
  { id: 1, lat: 40.7128, lng: -74.0060, name: 'New York' },
  { id: 2, lat: 34.0522, lng: -118.2437, name: 'Los Angeles' },
  { id: 3, lat: 41.8781, lng: -87.6298, name: 'Chicago' },
];

<HereMap
  apikey="YOUR_API_KEY"
  options={{ center: { lat: 39.8283, lng: -98.5795 }, zoom: 4 }}
>
  {cities.map((city) => (
    <Marker
      key={city.id}
      position={{ lat: city.lat, lng: city.lng }}
      label={city.name}
    />
  ))}
</HereMap>

​
Draggable Marker

import { HereMap, Marker } from '@rodrito/react-here-maps';
import { useState } from 'react';

function DraggableMarkerExample() {
  const [position, setPosition] = useState({ lat: 40.7128, lng: -74.0060 });

  return (
    <>
      <HereMap
        apikey="YOUR_API_KEY"
        options={{ center: position, zoom: 12 }}
      >
        <Marker
          position={position}
          draggable
          onDragEnd={(event) => {
            const coord = event.target.getGeometry();
            setPosition({ lat: coord.lat, lng: coord.lng });
          }}
        />
      </HereMap>

      <div>
        <p>Latitude: {position.lat.toFixed(4)}</p>
        <p>Longitude: {position.lng.toFixed(4)}</p>
      </div>
    </>
  );
}

​
Custom Icon

<Marker
  position={{ lat: 48.8566, lng: 2.3522 }}
  label="Paris"
  icon="https://example.com/custom-marker.png"
  iconSize={{ w: 32, h: 32 }}
  iconAnchor={{ x: 16, y: 32 }}
/>
The iconAnchor determines which point of the icon image corresponds to the marker’s geographical position. For a pin-shaped icon, set it to the bottom center (e.g., { x: width/2, y: height }).

​
Interactive Markers

import { HereMap, Marker } from '@rodrito/react-here-maps';
import { useState } from 'react';

function InteractiveMarkers() {
  const [selected, setSelected] = useState<number | null>(null);

  const locations = [
    { id: 1, lat: 40.7128, lng: -74.0060, name: 'NYC' },
    { id: 2, lat: 34.0522, lng: -118.2437, name: 'LA' },
  ];

  return (
    <HereMap
      apikey="YOUR_API_KEY"
      options={{ center: { lat: 39.8283, lng: -98.5795 }, zoom: 4 }}
    >
      {locations.map((loc) => (
        <Marker
          key={loc.id}
          position={{ lat: loc.lat, lng: loc.lng }}
          label={loc.name}
          onClick={() => setSelected(loc.id)}
          icon={selected === loc.id ? '/selected-marker.png' : '/marker.png'}
        />
      ))}
    </HereMap>
  );
}

​
TypeScript Types

import type { MarkerProps } from '@rodrito/react-here-maps';

const markerConfig: MarkerProps = {
  position: { lat: 40.7128, lng: -74.0060 },
  label: 'New York',
  draggable: true,
};

​
Performance Tips

For 100+ markers, consider using marker clustering or virtualization techniques. Render only markers in the visible viewport.
Optimize icon images for web (WebP format, appropriate size). Preload icons that will be used frequently.
Avoid heavy computations in onDragEnd. Use debouncing for API calls triggered by marker position changes.

​
See Also

HereMap

Map container component

Polyline

Draw lines between markers

Examples

Interactive marker examples