Struggling for this since a long time. I want to use Bootstrap glyphicon as a google map marker image. Below is my javascript code for 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
    });      

If anyone can guide me with a example?

Struggling for this since a long time. I want to use Bootstrap glyphicon as a google map marker image. Below is my javascript code for 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
    });      

If anyone can guide me with a example?

• javascript
• google-maps
• twitter-bootstrap-3
• glyphicons

• Check the source code for this gmaps-samples-v3.googlecode./svn/trunk/overlayview/… more details here groups.google./forum/#!topic/google-maps-js-api-v3/… – Aamir Afridi Commented May 22, 2014 at 14:51
• Looks like you cannot. Read productforums.google./forum/#!msg/maps/c3W8kbRzCaQ/… – Aamir Afridi Commented May 22, 2014 at 14:55
• 1 You can use labels instead jsbin./zenem/1/edit where you can control marker with css – Aamir Afridi Commented May 22, 2014 at 15:03
• Hi, idrisjafer did you find the solution for this? – Jeevan Roy dsouza Commented Jan 12, 2016 at 5:50
• 1 You need to use 'Leaflet.awesome-markers plugin v2.0' github./lvoogdt/Leaflet.awesome-markers – Anurag Kumar Commented Apr 26, 2016 at 13:13

1 Answer 1

Firstly, you will need the Glyphicons as vectors which you can purchase here: http://glyphicons./

With the Javascript API version 3, you can use an SVG path as described in the documentation here:

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

The Google example code is thus:

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