Adding multiple characters to markers using Google Maps API

Question

Problem:

Adding multiple characters to markers using Google Maps API.

Minimal Working Example (MWA):

In the example below I map a line between two airports (PEK and FRA) but the markers don't seem to allow for multiple characters.

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Polyline</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var flightPath;
      var map;

      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          zoom: 3,
          center: {lat: 39.782, lng: 116.387},
          mapTypeId: google.maps.MapTypeId.TERRAIN
        });

        var flightPathCoordinates = [
          {lat: 39.782, lng: 116.387},
          {lat: 50.026, lng: 8.543}
        ];

        var myPEK = {lat: 39.782, lng: 116.387};
        var myFRA = {lat: 50.026, lng: 8.543};

        flightPath = new google.maps.Polyline({
          path: flightPathCoordinates,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });


        addLine();

        var marker = new google.maps.Marker({
            position: myPEK,
            map: map,
            label: 'PEK',
            title: 'Beijing'
        });

        var marker = new google.maps.Marker({
            position: myFRA,
            map: map,
            label: 'FRA',
            title: 'Frankfurt'
        });

      }

      function addLine() {
        flightPath.setMap(map);
      }

    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCrI9AcuDk0DxHVFjbAsSZz2DMm4zqsdCA&callback=initMap">
    </script>
  </body>
</html>

Desired output:

Get markers to work with multiple characters.
Add labels that allow for at least 3 characters.
Any other solution that would show the IATA code for the airports.

Google maps marker don't allow multiple character (one only).. — ScaisEdge, May 16 '16 at 18:25
Possible duplicate of [http://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters](http://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters) — geocodezip, May 16 '16 at 18:49

score 1 · Accepted Answer · answered May 16 '16 at 18:30

If you need a map Label you can use an extension library called google-maps utility libraries v3 map label ..

You can find the code at : https://github.com/googlemaps/js-map-label

add this library to your

           aMapLabel = new MapLabel({
            text: 'Your Text',
            position: mapLabelCenter,
            strokeColor: '#FFFFFF',       
            fontColor: '#FFFFFF',             
            map: map,
            fontSize: 24,
            strokeWeight: 0,   
            align: 'left'
        });

        marker.bindTo('map', aMapLabel);
        marker.bindTo('position', aMapLabel);

or you can use also https://github.com/googlemaps/v3-utility-library/tree/master/markerwithlabel

These two are the better solution for manage label (or markers with label) in google maps

score 0 · Answer 2 · answered May 16 '16 at 21:18

Working solution (not optimised):

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <title>TravelTools Google Map</title>
    <style>
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map {
        height: 100%;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <script src="https://googlemaps.github.io/js-map-label/src/maplabel-compiled.js"></script>

    <script>
      var flightPath;
      var map;

      function init() {

        var myLatlng = new google.maps.LatLng(39.782, 116.387);
        var myOptions = {
          zoom: 3,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var flightPathCoordinatesPEKFRA = [
          {lat: 39.782, lng: 116.387},
          {lat: 50.026, lng: 8.543}
        ];

        var flightPathCoordinatesPEKCDG = [
          {lat: 39.782, lng: 116.387},
          {lat: 49.012, lng: 2.55}
        ];

        flightPathPEKFRA = new google.maps.Polyline({
          path: flightPathCoordinatesPEKFRA,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

        flightPathPEKCDG = new google.maps.Polyline({
          path: flightPathCoordinatesPEKCDG,
          strokeColor: '#FF0000',
          strokeOpacity: 1.0,
          strokeWeight: 2
        });

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

        flightPathPEKFRA.setMap(map);
        flightPathPEKCDG.setMap(map);

        // PEK
        var myPEK = new MapLabel({
          text: 'PEK',
          position: new google.maps.LatLng(39.782, 116.387),
          map: map,
          fontSize: 11,
          align: 'center'
        });

        myPEK.set('position', new google.maps.LatLng(39.782, 116.387));
        var marker = new google.maps.Marker();
        marker.bindTo('map', myPEK);
        marker.bindTo('position', myPEK);

        // FRA
        var myFRA = new MapLabel({
          text: 'FRA',
          position: new google.maps.LatLng(50.026, 8.543),
          map: map,
          fontSize: 11,
          align: 'center'
        });
        myFRA.set('position', new google.maps.LatLng(50.026, 8.543));

        var marker = new google.maps.Marker();
        marker.bindTo('map', myFRA);
        marker.bindTo('position', myFRA);

        // CDG
        var myCDG = new MapLabel({
          text: 'CDG',
          position: new google.maps.LatLng(49.012, 2.55),
          map: map,
          fontSize: 11,
          align: 'center'
        });
        myCDG.set('position', new google.maps.LatLng(49.012, 2.55));

        var marker = new google.maps.Marker();
        marker.bindTo('map', myCDG);
        marker.bindTo('position', myCDG);

        marker.setDraggable(true);
      }

      google.maps.event.addDomListener(window, 'load', init);
    </script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Adding multiple characters to markers using Google Maps API

2 Answers2