19. September 2023

Mit simplegmaps kannst du individuelle Google Maps mit mehreren Markern ganz einfach erstellen

Google Maps sind ein fantastisches Tool zur Darstellung von – Überraschung – Standorten. Während es sehr einfach ist, einen einzigen Standort auf einer Karte darzustellen und im iFrame einzubinden, ist es relativ umständlich und kompliziert mehrere Marker auf einer Karte zu platzieren und mit eigenen Tooltips zu versehen.

Das JavaScript(-Plug-in) simplegmaps vereinfacht diesen Prozess enorm.

Während man laut Google folgenden Code zur Erstellung eines Markers nutzen sollte…

<div id="map"></div>

<script>
function initMap() {
  const myLatLng = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: myLatLng,
  });

  new google.maps.Marker({
    position: myLatLng,
    map,
    title: "Hello World!",
  });
}

window.initMap = initMap;
</script>Code-Sprache: HTML, XML (xml)

… reduziert sich der Code mit simplegmaps auf:

<div id="map" class="google-map">
  <div class="map-marker" data-title="Hello World!" data-latlng="-25.363, 131.044"></div>
</div>Code-Sprache: HTML, XML (xml)

Weitere Marker können einfach mit weiteren divs hinzugefügt werden. Auf diese Weise lässt sich z.B. auch ein Store-Locator oder Standort-Finder in WordPress recht einfach selbst bauen.

Auf der simplegmaps-Website finden sich viele weitere praxisnahe Beispiele. So z.B. auch „clustered markers“ – also Marker, die zu einem Symbol zusammengefasst werden, wenn zu viele Marker in einem Bereich sind.

Einziger Wermutstropfen: Auch simplegmaps erspart einem leider nicht die, wie ich finde, sehr umständliche Erstellung eines API-Keys in der Google Cloud Console.

http://subzane.github.io/simplegmaps/