Post
Ask Question
Jimmy Vens

Jimmy Vens

  • NA
  • 26
  • 12k

Align the label in center position in google map

Feb 16 2021 8:13 AM
Hi ,
 
I have a google map with marker and label text attached to it. I want to align the label content center of the marker dynamically. Label have to dynamically marked at the center of marker.
 
This is my sample code where i have hardcoded the label content.
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3. <head>  
  4.  <meta charset="UTF-8">  
  5.  <title>Térkép</title>  
  6.  <style>  
  7.        #map {  
  8.            height: 100%;  
  9.            width: 100%;  
  10.        }  
  11.        html, body {  
  12.            height: 100%;  
  13.            margin: 0;  
  14.            padding: 0;  
  15.        }  
  16.        .label {  
  17.            color: #000;  
  18.            background-color: white;  
  19.            border: 1px solid #000;  
  20.            font-family: "Lucida Grande", "Arial", sans-serif;  
  21.            font-size: 12px;  
  22.            text-align: center;  
  23.            white-space: nowrap;  
  24.            padding: 2px;  
  25.        }  
  26.        .label.green {  
  27.            background-color: #58D400;  
  28.        }  
  29.        .label.red {  
  30.            background-color: #D80027;  
  31.            color: #fff;  
  32.        }  
  33.        .label.yellow {  
  34.            background-color: #FCCA00;  
  35.        }  
  36.        .label.turquoise {  
  37.            background-color: #00D9D2;  
  38.        }  
  39.        .label.brown {  
  40.            background-color: #BF5300;  
  41.            color: #fff;  
  42.        }  
  43.  </style>  
  44.  <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3rthxrJtfGHmGJijI_fMrT96ecSc-AL8&v=3.exp" type="text/javascript"></script>  
  45.  <script src="http://cdn.sobekrepository.org/includes/gmaps-markerwithlabel/1.9.1/gmaps-markerwithlabel-1.9.1.js" type="text/javascript"></script>  
  46. </head>  
  47. <body>  
  48. <div id="map"></div>  
  49. <script>  
  50.  function initMap() {  
  51.    var bp = {lat: 47.538736, lng: 19.04631};  
  52.    var map = new google.maps.Map(document.getElementById('map'), {  
  53.      zoom: 11,  
  54.      center: bp  
  55.    });  
  56.    var locations = [  
  57.      ['Label 1', 47.453740, 19.142052, 'green', 38, -3],  
  58.      ['Label 2', 47.502547, 19.038126, 'red', -10, 20],  
  59.      ['Label 3', 47.650821, 19.020171, 'brown', 23, -3],  
  60.      ['Label 4', 47.490881, 19.012405, 'yellow', 23, -3],  
  61.      ['Label 5', 47.562505, 19.087996, 'red', 23, -3],  
  62.      ['Label 6', 47.481118, 19.250704, 'yellow', 37, -3],  
  63.      ['Label 7', 47.569537, 19.098241, 'yellow', -10, 20],  
  64.      ['Label 8', 47.496817, 19.030732, 'turquoise', 55, 33],  
  65.      ['Label 9', 47.480566, 19.276519, 'green', 10, -3],  
  66.      ['Label 10', 47.478538, 19.046445, 'turquoise', 23, -3],  
  67.      ['Label 11', 47.435689, 19.210308, 'turquoise', 10, -3],  
  68.      ['Label 12', 47.492465, 19.052041, 'red', -10, 15],  
  69.      ['Label 13', 47.523764, 19.096748, 'green', 25, -3],  
  70.      ['Label 14', 47.521279, 19.161779, 'yellow', 25, 50],  
  71.      ['Label 15', 47.438614, 19.183433, 'yellow', 45, -5],  
  72.      ['Label 16', 47.501973, 19.034013, 'brown', 40, 45]  
  73.    ];  
  74.    var icons = {  
  75.      'green': {  
  76.        url: 'https://goo.gl/qvLZ4R',  
  77.        color: '#58D400'  
  78.      },  
  79.      'yellow': {  
  80.        url: 'https://goo.gl/G6HyHS',  
  81.        color: '#FCCA00'  
  82.      },  
  83.      'red': {  
  84.        url: 'https://goo.gl/6hkqX1',  
  85.        color: '#D80027'  
  86.      },  
  87.      'turquoise': {  
  88.        url: 'https://goo.gl/uLRpYZ',  
  89.        color: '#00D9D2'  
  90.      },  
  91.      'brown': {  
  92.        url: 'https://goo.gl/XTosFM',  
  93.        color: '#BF5300'  
  94.      }  
  95.    };  
  96.    var image = 'https://goo.gl/dqvvFA';  
  97.    for (var i = 0; i < locations.length; i++) {  
  98.      var item = locations[i];  
  99.      var marker = new MarkerWithLabel({  
  100.        position: {lat: item[1], lng: item[2]},  
  101.        map: map,  
  102.        icon: icons[item[3]].url,  
  103.        labelContent: item[0],  
  104.        labelAnchor: new google.maps.Point(item[4], item[5]),  
  105.  // the CSS class for the label  
  106.        labelClass: "label " + item[3],  
  107.        labelInBackground: true  
  108.  });  
  109.  }  
  110.  }  
  111.  initMap();  
  112. </script>  
  113. </body>  
  114. </html>  
OutPut is
 
 
I want the label to be placed at the center of marker like below
 
 
In the sample i have given hardcoded values for label position. i want this to be dynamically place the label at the center of marker.
 
Please suggest. 

Answers (1)