Usa Bootstrap Glyphicon come indicatore di Google Maps

Question

Lottando per questo da molto tempo. Voglio usare glyphicon di Bootstrap come immagine di un indicatore di mappa di Google. Di seguito è riportato il mio codice javascript per google maps marker:

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 
    });  

Se qualcuno può guidarmi con un esempio?

Answer 1

In primo luogo, è necessario disporre dei Glyphicons come vettori che potete acquistare qui: http://glyphicons.com/

Con la JavaScript API versione 3, è possibile utilizzare un percorso SVG come descritto nella documentazione qui:

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

il codice di esempio di Google è quindi:

// 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 
    }); 
}