Use Bootstrap Glyphicon as a Google Maps Marker

Question

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?

Check the source code for this http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html more details here https://groups.google.com/forum/#!topic/google-maps-js-api-v3/kO9O1wqYjwU — Aamir Afridi, May 22 '14 at 14:51
Looks like you cannot. Read https://productforums.google.com/forum/#!msg/maps/c3W8kbRzCaQ/o3IQG_6D6r4J — Aamir Afridi, May 22 '14 at 14:55
You can use labels instead http://jsbin.com/zenem/1/edit where you can control marker with css — Aamir Afridi, May 22 '14 at 15:03
@JeevanRoydsouza You can use bootstrap glyphicon in labels as said by Aamir Afridi above in the comment. — idrisjafer, Jan 19 '16 at 07:01
You need to use 'Leaflet.awesome-markers plugin v2.0' https://github.com/lvoogdt/Leaflet.awesome-markers — Anurag Kumar, Apr 26 '16 at 13:13
I believe your answer is here [https://stackoverflow.com/questions/16375077/using-icon-fonts-as-markers-in-google-maps-v3](https://stackoverflow.com/questions/16375077/using-icon-fonts-as-markers-in-google-maps-v3) — Showcase Imagery, Jul 13 '17 at 18:04

score 4 · Accepted Answer · answered Oct 21 '17 at 19:57

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

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

https://developers.google.com/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
  });
}

Use Bootstrap Glyphicon as a Google Maps Marker

1 Answers1