it-swarm.com.de

Wie kann ich in Google Maps V3 nummerierte Kartenmarkierungen erstellen?

Ich arbeite an einer Karte mit mehreren Markierungen.

Diese Markierungen verwenden ein benutzerdefiniertes Symbol, aber ich möchte auch Zahlen oben hinzufügen. Ich habe gesehen, wie dies mit älteren Versionen der API erreicht wurde. Wie kann ich das in V3 machen?

* Hinweis - Das Attribut "title" erstellt eine QuickInfo, wenn Sie den Marker mit der Maus über den Marker bewegen. Ich möchte jedoch etwas, das über dem benutzerdefinierten Bild platziert wird, auch wenn Sie nicht darüber schweben.

Hier ist die Dokumentation für die Markierungsklasse, und keines dieser Attribute scheint zu helfen: http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions

56
marclar

Leider ist es nicht sehr einfach. Sie können basierend auf der OverlayView-Klasse ( ein Beispiel ) eine eigene benutzerdefinierte Markierung erstellen und Ihren eigenen HTML-Code einschließlich eines Zählers einfügen. Dadurch haben Sie eine sehr einfache Markierung, die Sie nicht leicht ziehen oder Schatten hinzufügen können, aber sie ist sehr anpassbar.

Alternativ können Sie der Standardmarkierung eine Beschriftung hinzufügen . Dies wird weniger anpassbar sein, sollte aber funktionieren. Es behält auch alle nützlichen Dinge, die der Standardmarker macht.

Weitere Informationen zu den Überlagerungen finden Sie in Googles Artikel Spaß mit MVC-Objekten .

Bearbeiten: Wenn Sie keine JavaScript-Klasse erstellen möchten, können Sie die Chart-API von Google verwenden. Zum Beispiel:

Nummerierte Markierung: 

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Textmarkierung: 

http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo

Dies ist die schnelle und einfache Route, die jedoch weniger anpassbar ist und vom Client für jede Markierung ein neues Bild heruntergeladen werden muss.

62
dave1010

So mache ich es in V3:

Ich beginne mit dem Laden der Google Maps API und lade in der Callback-Methode initialize() MarkerWithLabel.js , die ich gefunden habe hier :

function initialize() {

            $.getScript("/js/site/marker/MarkerWithLabel.js#{applicationBean.version}", function(){

            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(currentLat, currentLng),
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                streetViewControl: false,
                mapTypeControl: false
            };

            var map = new google.maps.Map(document.getElementById('mapholder'),
                    mapOptions);

            var bounds = new google.maps.LatLngBounds();

            for (var i = 0; i < mapData.length; i++) {
                createMarker(i+1, map, mapData[i]); <!-- MARKERS! -->
                extendBounds(bounds, mapData[i]);
            }
            map.fitBounds(bounds);
            var maximumZoomLevel = 16;
            var minimumZoomLevel = 11;
            var ourZoom = defaultZoomLevel; // default zoom level

            var blistener = google.maps.event.addListener((map), 'bounds_changed', function(event) {
                if (this.getZoom(map.getBounds) &gt; 16) {
                    this.setZoom(maximumZoomLevel);
                }
                google.maps.event.removeListener(blistener);
            });
            });
        }

        function loadScript() {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=places&amp;sensor=false&amp;callback=initialize";
            document.body.appendChild(script);
        }

        window.onload = loadScript;

    </script> 

Dann erstelle ich die Marker mit createMarker():

function createMarker(number, currentMap, currentMapData) {

   var marker = new MarkerWithLabel({
       position: new google.maps.LatLng(currentMapData[0], currentMapData[1]),
                 map: currentMap,
                 icon: '/img/sticker/empty.png',
                 shadow: '/img/sticker/bubble_shadow.png',
                 transparent: '/img/sticker/bubble_transparent.png',
                 draggable: false,
                 raiseOnDrag: false,
                 labelContent: ""+number,
                 labelAnchor: new google.maps.Point(3, 30),
                 labelClass: "mapIconLabel", // the CSS class for the label
                 labelInBackground: false
                });
            }

Da ich der Markierung die Klasse mapIconLabel hinzugefügt habe, kann ich einige CSS-Regeln in meine CSS einfügen:

.mapIconLabel {
    font-size: 15px;
    font-weight: bold;
    color: #FFFFFF;
    font-family: 'DINNextRoundedLTProMediumRegular';
}

Und hier ist das Ergebnis:

MarkerWithIconAndLabel

47
jakob

Ich habe nicht genug Ruf, um Antworten zu kommentieren, wollte aber darauf hinweisen, dass die Google Chart API nicht mehr verwendet wird.

Von der API-Homepage :

Der Bereich "Infografiken" von Google Chart Tools wurde offiziell aufgehoben am 20. April 2012.

27
Alex

Sie können eine Reihe von nummerierten Symbolen von den auf dieser Website bereitgestellten Quellen herunterladen:

Dann sollten Sie Folgendes tun können:

<!DOCTYPE html>
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Google Maps Demo</title> 
    <script type="text/javascript"
            src="http://maps.google.com/maps/api/js?sensor=false"></script> 

    <script type="text/javascript"> 
    function initialize() {

      var myOptions = {
        zoom: 11,
        center: new google.maps.LatLng(-33.9, 151.2),
        mapTypeId: google.maps.MapTypeId.ROADMAP
      }

      var map = new google.maps.Map(document.getElementById("map"), myOptions);

      var locations = [
        ['Bondi Beach', -33.890542, 151.274856, 4],
        ['Coogee Beach', -33.923036, 151.259052, 5],
        ['Cronulla Beach', -34.028249, 151.157507, 3],
        ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
        ['Maroubra Beach', -33.950198, 151.259302, 1]
      ];

      for (var i = 0; i < locations.length; i++) {
          var image = new google.maps.MarkerImage('marker' + i + '.png',
                      new google.maps.Size(20, 34),
                      new google.maps.Point(0, 0),
                      new google.maps.Point(10, 34));

          var location = locations[i];
          var myLatLng = new google.maps.LatLng(location[1], location[2]);
          var marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              icon: image,
              title: location[0],
              zIndex: location[3]
          });
      }
    }
    </script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize();"> 
    <div id="map" style="width:400px; height:500px;"></div> 
</body> 
</html>

Screenshot vom obigen Beispiel:

Google Numbered Marker Icons

Beachten Sie, dass Sie hinter den Markierungen problemlos einen Schatten hinzufügen können. Sie können das Beispiel unter Google Maps API-Referenz: Komplexe Markierungen nach weiteren Informationen überprüfen.

21
Daniel Vassallo

Dies wurde nun der Mapping-Dokumentation hinzugefügt und erfordert keinen Drittanbietercode. 

Sie können diese beiden Beispiele kombinieren:

https://developers.google.com/maps/documentation/javascript/examples/marker-labels

https://developers.google.com/maps/documentation/javascript/examples/icon-simple

So erhalten Sie Code:

var labelIndex = 0;
var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789';

function initialize() {
  var bangalore = { lat: 12.97, lng: 77.59 };
  var map = new google.maps.Map(document.getElementById('map-canvas'), {
    zoom: 12,
    center: bangalore
  });

  // This event listener calls addMarker() when the map is clicked.
  google.maps.event.addListener(map, 'click', function(event) {
    addMarker(event.latLng, map);
  });

  // Add a marker at the center of the map.
  addMarker(bangalore, map);
}

// Adds a marker to the map.
function addMarker(location, map) {
  // Add the marker at the clicked location, and add the next-available label
  // from the array of alphabetical characters.
  var marker = new google.maps.Marker({
    position: location,
    label: labels[labelIndex],
    map: map,
    icon: 'image.png'
  });
}

google.maps.event.addDomListener(window, 'load', initialize);

Wenn Sie mehr als 35 Marken haben, funktioniert diese Methode nicht, da auf dem Etikett nur das erste Zeichen angezeigt wird (bei Verwendung von A-Z und 0-9 35). Bitte stimmen Sie für diese Google Maps-Ausgabe , um die Aufhebung dieser Einschränkung zu beantragen.

14
John

Ich habe dies mit einer ähnlichen Lösung wie @ZuzEL gemacht.

Anstelle der Standardlösung ( http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000 ) können Sie diese Bilder nach Bedarf mit JavaScript erstellen serverseitiger Code.

Google google.maps.Marker akzeptiert Base64 für seine icon -Eigenschaft. Damit können wir aus einem SVG ein gültiges Base64 erstellen.

 enter image description here

Sie können den Code für dieses Bild in diesem Plunker anzeigen: http://plnkr.co/edit/jep5mVN3DsVRgtlz1GGQ?p=preview

var markers = [
  [1002, -14.2350040, -51.9252800],
  [2000, -34.028249, 151.157507],
  [123, 39.0119020, -98.4842460],
  [50, 48.8566140, 2.3522220],
  [22, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
    generateIcon(point[0], function(src) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      bounds.extend(pos);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: src
      });
    });
  });

  map.fitBounds(bounds);
}

var generateIconCache = {};

function generateIcon(number, callback) {
  if (generateIconCache[number] !== undefined) {
    callback(generateIconCache[number]);
  }

  var fontSize = 16,
    imageWidth = imageHeight = 35;

  if (number >= 1000) {
    fontSize = 10;
    imageWidth = imageHeight = 55;
  } else if (number < 1000 && number > 100) {
    fontSize = 14;
    imageWidth = imageHeight = 45;
  }

  var svg = d3.select(document.createElement('div')).append('svg')
    .attr('viewBox', '0 0 54.4 54.4')
    .append('g')

  var circles = svg.append('circle')
    .attr('cx', '27.2')
    .attr('cy', '27.2')
    .attr('r', '21.2')
    .style('fill', '#2063C6');

  var path = svg.append('path')
    .attr('d', 'M27.2,0C12.2,0,0,12.2,0,27.2s12.2,27.2,27.2,27.2s27.2-12.2,27.2-27.2S42.2,0,27.2,0z M6,27.2 C6,15.5,15.5,6,27.2,6s21.2,9.5,21.2,21.2c0,11.7-9.5,21.2-21.2,21.2S6,38.9,6,27.2z')
    .attr('fill', '#FFFFFF');

  var text = svg.append('text')
    .attr('dx', 27)
    .attr('dy', 32)
    .attr('text-anchor', 'middle')
    .attr('style', 'font-size:' + fontSize + 'px; fill: #FFFFFF; font-family: Arial, Verdana; font-weight: bold')
    .text(number);

  var svgNode = svg.node().parentNode.cloneNode(true),
    image = new Image();

  d3.select(svgNode).select('clippath').remove();

  var xmlSource = (new XMLSerializer()).serializeToString(svgNode);

  image.onload = (function(imageWidth, imageHeight) {
    var canvas = document.createElement('canvas'),
      context = canvas.getContext('2d'),
      dataURL;

    d3.select(canvas)
      .attr('width', imageWidth)
      .attr('height', imageHeight);

    context.drawImage(image, 0, 0, imageWidth, imageHeight);

    dataURL = canvas.toDataURL();
    generateIconCache[number] = dataURL;

    callback(dataURL);
  }).bind(this, imageWidth, imageHeight);

  image.src = 'data:image/svg+xml;base64,' + btoa(encodeURIComponent(xmlSource).replace(/%([0-9A-F]{2})/g, function(match, p1) {
    return String.fromCharCode('0x' + p1);
  }));
}

initializeMaps();
#map_canvas {
  width: 100%;
  height: 300px;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

In dieser Demo erstelle ich die SVG-Datei mit D3.js, wandelte sie dann in Canvas um, sodass ich die Größe des Bildes beliebig ändern kann. Danach erhalte ich Base64 von der Canvas-toDataURL-Methode.

Die gesamte Demo basiert auf meinem @ thiago-mata -Code. Kudos für ihn.

10
Estevão Lucas

Wie wäre es damit? (Jahr 2015)

1) Holen Sie sich ein benutzerdefiniertes Markierungsbild.

var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png"; 

2) Erstellen Sie eine canvas in RAM und zeichnen Sie dieses Bild darauf

imageObj.onload = function(){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    context.drawImage(imageObj, 0, 0);
}

3) Schreibe etwas darüber 

context.font = "40px Arial";
context.fillText("54", 17, 55);

4) Holen Sie Rohdaten aus dem Canvas-Bereich und stellen Sie diese anstelle von URL für die Google-API bereit

var image = {
    url: canvas.toDataURL(),
 };
 new google.maps.Marker({
    position: position,
    map: map,
    icon: image
 });

 enter image description here

Vollständiger Code: 

function addComplexMarker(map, position, label, callback){
    var canvas = document.createElement('canvas');
    var context = canvas.getContext("2d");
    var imageObj = new Image();
    imageObj.src = "/markers/blank_pin.png";
    imageObj.onload = function(){
        context.drawImage(imageObj, 0, 0);

        //Adjustable parameters
        context.font = "40px Arial";
        context.fillText(label, 17, 55);
        //End

        var image = {
            url: canvas.toDataURL(),
            size: new google.maps.Size(80, 104),
            Origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(40, 104)
        };
        // the clickable region of the icon.
        var shape = {
            coords: [1, 1, 1, 104, 80, 104, 80 , 1],
            type: 'poly'
        };
        var marker = new google.maps.Marker({
            position: position,
            map: map,
            labelAnchor: new google.maps.Point(3, 30),
            icon: image,
            shape: shape,
            zIndex: 9999
        });
        callback && callback(marker)
    };
});
9
ZuzEL

Google Maps Version 3 bietet integrierte Unterstützung für Markierungsetiketten. Sie müssen keine eigenen Bilder mehr erstellen oder Drittanbieter-Klassen implementieren. Beschriftungsschilder

5
ummdorian

Es ist durchaus möglich, beschriftete Icons auf der Serverseite zu generieren, wenn Sie Programmierkenntnisse haben. Sie benötigen zusätzlich zu PHP die Gd-Bibliothek auf dem Server. Ich arbeite seit einigen Jahren gut für mich, aber zugegebenermaßen schwierig, die Symbolbilder synchron zu bekommen.

Ich mache das über AJAX, indem ich die wenigen Parameter sende, um das leere Symbol und den Text und die Farbe sowie die anzuwendende bgcolor zu definieren. Hier ist mein PHP:

header("Content-type: image/png");
//$img_url = "./icons/gen_icon5.php?blank=7&text=BB";

function do_icon ($icon, $text, $color) {
$im = imagecreatefrompng($icon);
imageAlphaBlending($im, true);
imageSaveAlpha($im, true);

$len = strlen($text);
$p1 = ($len <= 2)? 1:2 ;
$p2 = ($len <= 2)? 3:2 ;
$px = (imagesx($im) - 7 * $len) / 2 + $p1;
$font = 'arial.ttf';
$contrast = ($color)? imagecolorallocate($im, 255, 255, 255): imagecolorallocate($im, 0, 0, 0); // white on dark?

imagestring($im, $p2, $px, 3, $text, $contrast);    // imagestring  ( $image, $font, $x, $y, $string, $color)

imagepng($im);
imagedestroy($im);
}
$icons =   array("black.png", "blue.png", "green.png", "red.png", "white.png", "yellow.png", "gray.png", "lt_blue.png", "orange.png");      // 1/9/09
$light =   array( TRUE,         TRUE,       FALSE,       FALSE,     FALSE,      FALSE,      FALSE,          FALSE,      FALSE);     // white text?

$the_icon = $icons[$_GET['blank']];             // 0 thru 8 (note: total 9)
$the_text = substr($_GET['text'], 0, 3);        // enforce 2-char limit
do_icon ($the_icon, $the_text,$light[$_GET['blank']] ); 

Es wird clientseitig über Folgendes aufgerufen: var image_file = "./our_icons/gen_icon.php?blank=" + escape (Icons [Farbe]) + "& text =" + iconStr;

3
user1032402

Meine zwei Cent zeigen, wie man die Google Charts API verwendet, um dieses Problem zu lösen.

2

Sie können die Option Markierung mit Beschriftung in google-maps-utility-library-v3 ..__ verwenden.enter image description here

Verweisen Sie einfach auf https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries .

0
bCliks

Vielleicht gibt es diejenigen, die immer noch danach suchen, aber die Suche nach Google Dynamic-Symbolen und anderen Karten-Icon-Bibliotheken ist etwas zu hässlich.

Einen einfachen Marker mit einer beliebigen Nummer mithilfe einer URL hinzufügen. In Google Drive mit Google My Maps werden nummerierte Symbole erstellt, wenn Sie einen Karten-Layer verwenden, der auf "Sequenz von Zahlen" eingestellt ist, und dann Marker/Punkte auf der Karte hinzufügen.

Beim Betrachten des Quellcodes hat Google eine eigene Methode, dies über eine URL zu tun:

https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png,icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1738-blank-sequence_4x.png&highlight=ff000000,0288D1,ff000000&scale=2.0&color=ffffffff&psize=15&text=56&font=fonts/Roboto-Medium.ttf

Über URL

 enter image description here

Ich habe nicht ausgiebig damit gespielt, aber durch Ändern der Hex-Farbcodes im Parameter 'Höhepunkt' (der Parameter Farbe ändert nicht die Farbe, wie Sie vielleicht denken), kann der 'Text'-Wert auf eine beliebige Zeichenfolge gesetzt werden und Sie können dies vornehmen ein schönes rundes Symbol mit beliebiger Zahl/Wert. Ich bin mir sicher, dass auch die anderen Parameter von Nutzen sein können.

Eine Einschränkung bei diesem Ansatz, wer weiß, wann Google diese URL von der Welt entfernen wird!

0
Nado11

Basierend auf @ dave1010 answer, jedoch mit aktualisierten https-Links.

Nummerierte Markierung:

https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

Textmarkierung:

https://chart.googleapis.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|Marker
0
Pedro Lobito

Ich entdeckte die beste Methode, um dies zu tun . Verwenden Sie Snap.svg , um die svg zu erstellen, und verwenden Sie dann die Funktion toDataURL (), die die Grafikdaten erstellt, um sie als Symbol einzuschließen . Beachten Sie, dass ich die SlidingMarker-Klasse für den Marker, der mir eine schöne Bewegung des Markers gibt ..__ Mit Snap.svg können Sie jede Art von Grafik erstellen und Ihre Karte wird fantastisch aussehen.

var s = Snap(100, 100);
s.text(50, 50, store.name);
// Use more graphics here.
var marker = new SlidingMarker({
  position: {lat: store.lat, lng: store.lng},
  map: $scope.map,
  label: store.name, // you do not need this
  title: store.name, // nor this
  duration: 2000,
  icon: s.toDataURL()
});
0
Αλέκος

EINFACHSTE LÖSUNG - USE SVG

Funktioniert in: in IE9, IE10, FF, Chrome, Safari

(Wenn Sie andere Browser verwenden, aktivieren Sie bitte "Code-Snippet ausführen" und geben Sie einen Kommentar ein.)

Keine externen Abhängigkeiten außer Google Maps API!

 enter image description here

Dies ist recht einfach, vorausgesetzt, Sie haben Ihr Symbol im Format .svg. In diesem Fall einfach add das entsprechende Textelement und ändern Sie den Inhalt mit JS an Ihre Bedürfnisse.

Fügen Sie dem .svg-Code so etwas hinzu (dies ist ein Textabschnitt, der später mit JS geändert wird):

<text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">1</text>

Beispiel: (teilweise von @ EstevãoLucas kopiert)

Wichtig: Verwenden Sie die richtigen <text>-Tag-Eigenschaften. Hinweis text-anchor="middle" x="50%" y="28" welche Mitte längere Zahlen (Weitere Informationen: Wie platziere ich Text in einem SVG-Rechteck )

Verwenden Sie encodeURIComponent() (dies gewährleistet wahrscheinlich die Kompatibilität mit IE9 und 10).

// Most important part (use output as Google Maps icon)
function getMarkerIcon(number) {
  // inline your SVG image with number variable
  var svg = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="40" height="40" viewBox="0 0 40 40"> <defs> <rect id="path-1" width="40" height="40"/> <mask id="mask-2" width="40" height="40" x="0" y="0" fill="white"> <use xlink:href="#path-1"/> </mask> </defs> <g id="Page-1" fill="none" fill-rule="evenodd"> <g id="Phone-Portrait---320" transform="translate(-209 -51)"> <g id="Group" transform="translate(209 51)"> <use id="Rectangle" fill="#FFEB3B" stroke="#F44336" stroke-width="4" mask="url(#mask-2)" xlink:href="#path-1"/> <text id="1" fill="#20539F" font-family="NunitoSans-ExtraBold, Nunito Sans" font-size="18" font-weight="600" letter-spacing=".104" text-anchor="middle" x="50%" y="28">' + number + '</text> </g> </g> </g> </svg>';
  // use SVG without base64 see: https://css-tricks.com/probably-dont-base64-svg/
  return 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svg);
}

// Standard Maps API code
var markers = [
  [1, -14.2350040, -51.9252800],
  [2, -34.028249, 151.157507],
  [3, 39.0119020, -98.4842460],
  [5, 48.8566140, 2.3522220],
  [9, 38.7755940, -9.1353670],
  [12, 12.0733335, 52.8234367],
];

function initializeMaps() {
  var myLatLng = {
    lat: -25.363,
    lng: 131.044
  };

  var map = new google.maps.Map(document.getElementById('map_canvas'), {
    zoom: 4,
    center: myLatLng
  });

  var bounds = new google.maps.LatLngBounds();

  markers.forEach(function(point) {
      var pos = new google.maps.LatLng(point[1], point[2]);

      new google.maps.Marker({
        position: pos,
        map: map,
        icon: getMarkerIcon(point[0]),         
      });

      bounds.extend(pos);
  });

  map.fitBounds(bounds);
}

initializeMaps();
#map_canvas {
  width: 100%;
  height: 300px;
}
<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>        
  </head>

  <body>
    <div id="map_canvas"></div>
  </body>
  
  <script src="script.js"></script>

</html>

Weitere Informationen zu Inline-SVG in Google Maps: https://robert.katzki.de/posts/inline-svg-as-google-maps-marker

0
jmarceli