Google Maps api - label for markers

Question

I want to include a cusom Map on my site, for the main part everything works, except for one thing.

The red marker needs a label, though I could add a icon and use that as marker, but I'd like to add the label without an extra image.

Also I don't want to use extra plugins.

If this doesn't work: Is it possible to add the mapoptions to the standard embed map? The only downside there is that it zooms upon scrolling.

---

Look of the current map:

---

Label the Marker should have:

Brandenburger Gate - Google Maps

---

HTML:

<div id="googleMap"></div>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

Javascript (jQuery):

$(function() {

    function showMap() {

        var mapZoom = 14;
        var LatLng = new google.maps.LatLng(52.516275, 13.377704);

        var mapOptions = {
            zoom: mapZoom,
            center: LatLng,
            streetViewControl: false,
            scrollwheel: false,
            navigationControl: false,
            mapTypeControl: false,
            scaleControl: false,
            keyboardShortcuts: false

        };

        var map = new google.maps.Map(document.getElementById('googleMap'),mapOptions);

        var marker = new google.maps.Marker({
            position: LatLng,
            map: map,
            draggable: false
        });
    }
    google.maps.event.addDomListener(window, 'load', showMap);

});

Answer 1

I know it's an old question but i had the same problem and i found out that you can use the property className to attach a class to the label. More here.

Example:

marker = new google.maps.Marker({
      position: new google.maps.LatLng(lat, lng),
      label: {
            text: "Hello World",
            color: "#203334",
            fontWeight: "bold",
            fontSize: "16px",
            className: "map-label"
      }
});

Answer 2

One option would be to use the InfoBox third party library and bind the position of the InfoBox to the marker.

var labelText = "Brandenburger Tor";

var myOptions = {
  content: labelText,
  boxStyle: {
    border: "none",
    textAlign: "center",
    fontSize: "12pt",
    fontWeight: "bold",
    width: "150px",
    color: "#C70E20"

  },
  disableAutoPan: true,
  pixelOffset: new google.maps.Size(10, -10),
  position: LatLng,
  closeBoxURL: "",
  isHidden: false,
  pane: "mapPane",
  enableEventPropagation: true
};

var ibLabel = new InfoBox(myOptions);
ibLabel.open(map);
var marker = new google.maps.Marker({
  position: LatLng,
  map: map,
  draggable: false
});
marker.bindTo('map', ibLabel);
marker.bindTo('position', ibLabel);

proof of concept fiddle

code snippet:

$(function() {

  function showMap() {

    var mapZoom = 14;
    var LatLng = new google.maps.LatLng(52.516275, 13.377704);

    var mapOptions = {
      zoom: mapZoom,
      center: LatLng,
      streetViewControl: false,
      scrollwheel: false,
      navigationControl: false,
      mapTypeControl: false,
      scaleControl: false,
      keyboardShortcuts: false
    };

    var map = new google.maps.Map(document.getElementById('googleMap'), mapOptions);

    var labelText = "Brandenburger Tor";

    var myOptions = {
      content: labelText,
      boxStyle: {
        border: "none",
        textAlign: "center",
        fontSize: "12pt",
        fontWeight: "bold",
        width: "150px",
        color: "#C70E20"
      },
      disableAutoPan: true,
      pixelOffset: new google.maps.Size(10, -10),
      position: LatLng,
      closeBoxURL: "",
      isHidden: false,
      pane: "mapPane",
      enableEventPropagation: true
    };

    var ibLabel = new InfoBox(myOptions);
    ibLabel.open(map);
    var marker = new google.maps.Marker({
      position: LatLng,
      map: map,
      draggable: false
    });
    marker.bindTo('map', ibLabel);
    marker.bindTo('position', ibLabel);
  }
  google.maps.event.addDomListener(window, 'load', showMap);
});

html,
body,
#googleMap {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/infobox/src/infobox.js"></script>
<div id="googleMap"></div>

Answer 3

you can use label of google marker like this:

new google.maps.Marker({
                position:latlng,
                map:map,
                label: 'A'
            });

Answer 4

The way to create a custom marker is to draw the desired image by drawing in a canvas, and then, use the SetIcon function with DataURL, from the canvas, as parameter.

// A way to create a GoogleMap marker with text 

enter code here

 var marker = new google.maps.Marker({position: new google.maps.LatLng(35.1,32), title: "My Custom Marker" }); 

var cnv=document.createElement("canvas"); 
var cntx = cnv.getContext("2d"); 
cnv.width=50; 
cnv.height=50; 
cntx.fillText("Hello World!",10,10); 

marker.setIcon(cnv.toDataURL('image/jpeg')); '

Answer 5

Try this code:

<style type="text/css">
   .labels {
     color: white;
     background-color: red;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 10px;
     text-align: center;
     width: 10px;     
     white-space: nowrap;
   }
 </style>

 var latLng = new google.maps.LatLng(49.47805, -123.84716);
 var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);

 var map = new google.maps.Map(document.getElementById('map_canvas'), {
   zoom: 12,
   center: latLng,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 var marker = new MarkerWithLabel({
   position: homeLatLng,
   map: map,
   labelContent: "BrandenBurger Tor",
   labelAnchor: new google.maps.Point(22, 0),
   labelClass: "labels" // the CSS class for the label
 });

For adding more customizable features to the markers please see this link.

Hope this Helps!!