Sử dụng Bootstrap Glyphicon làm Điểm đánh dấu của Google Maps

Question

Đấu tranh cho điều này từ lâu. Tôi muốn sử dụng glyphicon Bootstrap làm hình ảnh đánh dấu bản đồ google. Dưới đây là mã javascript của tôi cho điểm đánh dấu bản đồ google:

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

Nếu có ai có thể hướng dẫn tôi ví dụ?

Answer 1

Thứ nhất, bạn sẽ cần Glyphicons như là vectơ mà bạn có thể mua ở đây: http://glyphicons.com/

Với API phiên bản Javascript 3, bạn có thể sử dụng một con đường SVG như mô tả trong tài liệu hướng dẫn ở đây:

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

Ví dụ mã của Google là như sau:

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