Verwenden Sie Bootstrap Glyphicon als Google Maps Marker

Question

Struggling für diese seit langer Zeit. Ich möchte Bootstrap glyphicon als Google Map Marker-Bild verwenden. Unten ist mein Javascript-Code für Marker Google Maps:

var image = { 
    src: '<i class="glyphicon glyphicon-move"></i>',  
    size: new google.maps.Size(24, 24), 
    origin: new google.maps.Point(0,0), 
    anchor: new google.maps.Point(12,12) 
    }; 
var marker = new google.maps.Marker({ 
     draggable: true,   
     icon: image, 
     title: 'Drag to move to new location', 
     raiseOnDrag: false 
    });  

Wenn jemand mich mit einem Beispiel führen kann?

Answer 1

Zunächst müssen Sie die Glyphicons als Vektoren, die Sie hier kaufen können: http://glyphicons.com/

Mit der JavaScript-API Version 3 können Sie einen SVG-Pfad verwenden, wie hier in der Dokumentation beschrieben:

https://developers.google.com/maps/documentation/javascript/symbols#add_to_marker

der Code Google Beispiel ist also:

// This example uses SVG path notation to add a vector-based symbol 
// as the icon for a marker. The resulting icon is a star-shaped symbol 
// with a pale yellow fill and a thick yellow border. 

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
    zoom: 4, 
    center: {lat: -25.363882, lng: 131.044922} 
    }); 

    var goldStar = { 
    path: 'M 125,5 155,90 245,90 175,145 200,230 125,180 50,230 75,145 5,90 95,90 z', 
    fillColor: 'yellow', 
    fillOpacity: 0.8, 
    scale: 1, 
    strokeColor: 'gold', 
    strokeWeight: 14 
    }; 

    var marker = new google.maps.Marker({ 
    position: map.getCenter(), 
    icon: goldStar, 
    map: map 
    }); 
}