2
Answers

apply background colour for label in google maps marker

Jimmy Vens

Jimmy Vens
3y
7.3k
1
Hi ,
 
Below is my code. I have a google map with a marker. I want to apply background colour for the label with text "My Label Text".
 
The CSS for label is not working inside marker except label text and color. Please help.
  1. <style>  
  2. html,  
  3. body, #map {  
  4. height: 100%;  
  5. margin: 0;  
  6. padding: 0;  
  7. }  
  8. </style>  
  9. <div id="map"></div>  
  10. <!-- Replace the value of the key parameter with your own API key. -->  
  11. <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC3rthxrJtfGHmGJijI_fMrT96ecSc-AL8&v=3.exp" type="text/javascript"></script>  
  12. <script>  
  13. function initialize() {  
  14. var map = new google.maps.Map(document.getElementById('map'), {  
  15. zoom: 12,  
  16. center: {  
  17. lat: 12.97,  
  18. lng: 77.59  
  19. }  
  20. });  
  21. var markerConfig = {  
  22. lat: 12.97,  
  23. lng: 77.59  
  24. },  
  25. iconSize = 0.45,  
  26. icon = {  
  27. path: "M53.1,48.1c3.9-5.1,6.3-11.3,6.3-18.2C59.4,13.7,46.2,0.5,30,0.5C13.8,0.5,0.6,13.7,0.6,29.9 c0,6.9,2.5,13.1,6.3,18.2C12.8,55.8,30,77.5,30,77.5S47.2,55.8,53.1,48.1z",  
  28. fillColor: '#00492C',  
  29. fillOpacity: 1,  
  30. strokeWeight: 0,  
  31. scale: iconSize,  
  32. anchor: new google.maps.Point(32, 80),  
  33. labelOrigin: new google.maps.Point(30, 30)  
  34. };  
  35. var marker = new google.maps.Marker({  
  36. map: map,  
  37. position: new google.maps.LatLng(markerConfig.lat, markerConfig.lng),  
  38. label: {  
  39. text: "My Label Text",  
  40. color: 'white',  
  41. fontweight: "bold",  
  42. fontsize: "20px"  
  43. },  
  44. icon: icon,  
  45. });  
  46. };  
  47. google.maps.event.addDomListener(window, 'load', initialize);  
  48. </script>  
Answers (2)
Next Recommended Forum