Es kann losgehen!

Bevor Sie mit der Entwicklung beginnen, lesen Sie bitte unsere Entwicklerdokumentation.

Die Google Maps JavaScript API aktivieren

Zum Einstieg führen wir Sie durch die Google Developers Console, wo Sie vorab Folgendes tun müssen:

  1. Ein Projekt erstellen oder auswählen
  2. Die Google Maps JavaScript API und zugehörige Dienste aktivieren
  3. Zugehörige Schlüssel erstellen
Weiter

Anpassen einer Google-Karte: Benutzerdefinierte Marker

Übersicht

In dieser Anleitung lernen Sie, wie Sie das Symbol eines Google Maps-Markers verändern können. Bei der Lektüre dieser Anleitung sind Kenntnisse der Grundlagen der Erstellung von Markern von Vorteil.

Nachfolgend finden Sie ein Beispiel für eine Karte mit benutzerdefinierten Markern.

Der folgende Abschnitt enthält den gesamten Code, den Sie zum Erstellen der Karte in dieser Anleitung benötigen.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 16,
    center: new google.maps.LatLng(-33.91722, 151.23064),
    mapTypeId: 'roadmap'
  });

  var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  var icons = {
    parking: {
      icon: iconBase + 'parking_lot_maps.png'
    },
    library: {
      icon: iconBase + 'library_maps.png'
    },
    info: {
      icon: iconBase + 'info-i_maps.png'
    }
  };

  var features = [
    {
      position: new google.maps.LatLng(-33.91721, 151.22630),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91539, 151.22820),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91747, 151.22912),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91910, 151.22907),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91725, 151.23011),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91872, 151.23089),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91784, 151.23094),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91682, 151.23149),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91790, 151.23463),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91666, 151.23468),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.916988, 151.233640),
      type: 'info'
    }, {
      position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
      type: 'parking'
    }, {
      position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
      type: 'library'
    }
  ];

  // Create markers.
  features.forEach(function(feature) {
    var marker = new google.maps.Marker({
      position: feature.position,
      icon: icons[feature.type].icon,
      map: map
    });
  });
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>


Probieren Sie es selbst aus

Bewegen Sie die Maus oben rechts über den Codeblock, um den Code zu kopieren, oder öffnen Sie ihn in JSFiddle.

<!DOCTYPE html>
<html>
  <head>
    <title>Custom Markers</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 16,
          center: new google.maps.LatLng(-33.91722, 151.23064),
          mapTypeId: 'roadmap'
        });

        var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
        var icons = {
          parking: {
            icon: iconBase + 'parking_lot_maps.png'
          },
          library: {
            icon: iconBase + 'library_maps.png'
          },
          info: {
            icon: iconBase + 'info-i_maps.png'
          }
        };

        var features = [
          {
            position: new google.maps.LatLng(-33.91721, 151.22630),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91539, 151.22820),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91747, 151.22912),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91910, 151.22907),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91725, 151.23011),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91872, 151.23089),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91784, 151.23094),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91682, 151.23149),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91790, 151.23463),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91666, 151.23468),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.916988, 151.233640),
            type: 'info'
          }, {
            position: new google.maps.LatLng(-33.91662347903106, 151.22879464019775),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.916365282092855, 151.22937399734496),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91665018901448, 151.2282474695587),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.919543720969806, 151.23112279762267),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91608037421864, 151.23288232673644),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91851096391805, 151.2344058214569),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91818154739766, 151.2346203981781),
            type: 'parking'
          }, {
            position: new google.maps.LatLng(-33.91727341958453, 151.23348314155578),
            type: 'library'
          }
        ];

        // Create markers.
        features.forEach(function(feature) {
          var marker = new google.maps.Marker({
            position: feature.position,
            icon: icons[feature.type].icon,
            map: map
          });
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Anpassen eines Kartenmarkers

Nachfolgend ist ein Google Maps-Marker mit dem standardmäßigen roten Symbol dargestellt.

Sie können dieses Symbol durch ein Icon Ihrer Wahl ersetzen. In der nachfolgenden Tabelle wird der Code dargestellt, mit dem anstelle des standardmäßigen Markers ein Symbol für Parkplätze verwendet wird.

Code und Beschreibung
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
  var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'parking_lot_maps.png'
  });

Fügt dem Objekt MarkerOptions die Eigenschaft icon hinzu, um das Markersymbol zu verändern.
Bei der Eigenschaft icon kann es sich entweder um eine Zeichenfolge (die URL für das Markersymbol) oder ein Objekt Icon handeln.
Das angepasste Markersymbol sieht wie folgt aus.

Anpassen von Markern nach Kartenmerkmalen

Jeder Point of Interest in der Liste der Campusmerkmale besitzt ein Attribut type. Beachten Sie, dass im nachfolgenden Codeauszug die Typen parking, library und info angegeben sind. Sie können das Markersymbol entsprechend dem Kartenmerkmal type einstellen, auf das Sie es festlegen.

var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
  parking: {
    icon: iconBase + 'parking_lot_maps.png'
  },
  library: {
    icon: iconBase + 'library_maps.png'
  },
  info: {
    icon: iconBase + 'info-i_maps.png'
  }
};

function addMarker(feature) {
  var marker = new google.maps.Marker({
    position: feature.position,
    icon: icons[feature.type].icon,
    map: map
  });
}

Weitere Informationen

  • Das Bild auf einem Marker ist sein „Symbol“ oder „Icon“.
  • Ein Marker wird auch als „Pinnadel“ bezeichnet.

Feedback geben zu...

Google Maps JavaScript API
Google Maps JavaScript API