Google Maps API - Custom Label for Map Markers

Question

Google Maps API - Custom Label for Map Markers

I am trying to implement a custom map on my website, and everything seems to be working fine except for one issue.

The red marker on the map needs to have a label, but I don't want to use an additional image as an icon. Is there a way to add a label without any extra plugins?

If that doesn't work, is it possible to add the 'mapoptions' to the standard embed map? The only problem with this approach is that it zooms in when scrolling.

Current appearance of the map:

Desired label for the Marker:

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

});

javascript jquery google-maps google-maps-api-3

Answer 1

Answer №1

Though this question is old, I experienced the same issue and discovered that using the className property can help attach a class to the label. For more information, click here.

Here's an 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

Though this question is old, I experienced the same issue and discovered that using the className property can help attach a class to the label. For more information, click here.

Here's an 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 3

Answer №2

Give this code a try:

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

To enhance the markers with more custom features, check out this resource.

I hope this solution is helpful!

Answer 4

Give this code a try:

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

To enhance the markers with more custom features, check out this resource.

I hope this solution is helpful!

Answer 5

Answer №3

To design a unique marker, start by creating the desired image on a canvas and then utilize the SetIcon function with DataURL as the parameter to implement it.

// Here's a method to generate a custom GoogleMap marker incorporating text 

enter code here

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

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

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

Answer 6

To design a unique marker, start by creating the desired image on a canvas and then utilize the SetIcon function with DataURL as the parameter to implement it.

// Here's a method to generate a custom GoogleMap marker incorporating text 

enter code here

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

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

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

Answer 7

Answer №4

One way to utilize the label of google marker is by following this format:

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

Answer 8

One way to utilize the label of google marker is by following this format:

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

Answer 9

Answer №5

To incorporate the InfoBox third party library and link its position to the marker, consider using the following code snippet:

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

Check out a proof of concept fiddle here

https://i.stack.imgur.com/bYRAj.png

Snippet of the Code:

$(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 10

To incorporate the InfoBox third party library and link its position to the marker, consider using the following code snippet:

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

Check out a proof of concept fiddle here

https://i.stack.imgur.com/bYRAj.png

Snippet of the Code:

$(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>

Google Maps API - Custom Label for Map Markers

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Extract information from page 1 to page 2 by utilizing ajax

Send your information to a JSONP endpoint

There was a glitch encountered while constructing (Verifying type validity) with Prisma

What could be causing my page to suddenly disappear?

arrow function implemented in a React hook for handling onClick event

An issue has occurred: The necessary parameter (Slug) was not included as a string in the getStaticPaths function for the /post/[Slug] route

Combining various array values into a single key in JSON格式

What is the most efficient way to retrieve key pair values of separate elements in an array with just one API request?

Instructions for appending an id to the URL of events in fullcalendar using Rails

Utilizing Angular 5 routerLink for linking to absolute paths with hash symbols

Creating a new dynamic page can be achieved by clicking on a dynamically generated link. Would you like to learn how to do that?

Show the response obtained after making a POST request

What are the steps to clipping a canvas using CSS clip-path?

Having trouble deleting a Repeatable Job from the Bull queue in Node.js

Experience some issues with the NextJS beta app router where the GET request fails when using fetch, but surprisingly works

Display the item request form whenever a selection of an unidentified item is made using select2

Transferring PHP and JavaScript variables via AJAX to PHP page and storing in MySQL database table

Having trouble choosing elements with angular.element within ng-repeat loop

Utilizing Jquery UI in Visual Studio 2012 for developing asp.net webforms applications

Display XML elements on hover with a Bootstrap tooltip