Question

Here is my code for google map marker with label. I have included following javascript files:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="js/markerwithlabel.js"></script>

and code for map is:

function initialize() {
        var latLng = {lat: 12.923157, lng: 80.153337};
        var homelatLng = new google.maps.LatLng(12.923157, 80.153337);
        var mapCanvas = document.getElementById('map');
        var mapOptions = {
          center: latLng,
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        var marker = new MarkerWithLabel({
            position: homelatLng,
            map: map,
            labelContent: "ihoser",
            labelAnchor: new google.maps.Point(22, 0),
            labelClass: "map_marker_label", // the CSS class for the label
            labelStyle: {opacity: 0.75}
        });
        var infowindow = new google.maps.InfoWindow({
            content: "content";
        });
        google.maps.event.addListener(marker, 'click', function(e) {
           infowindow.open(map,this);
        });
        infowindow.open(map,marker);
    }
google.maps.event.addDomListener(window, 'load', initialize);

The style included is:

.map_marker_label {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;       
height:20px;  
border: 2px solid black;
white-space: nowrap;}

The map appears with marketr, infowindow and label. But the label is empty. In fact, labelContent does not load into DOM itself and even after centering the label by providing point, it seems to start at (0, 0).

I am attaching the image of the map.

Answer 1

Make sure you are using the latest version of markerwithlabel.js.

And there is a typo at line:

var infowindow = new google.maps.InfoWindow({
    content: "content";
});

Replace it to

var infowindow = new google.maps.InfoWindow({
    content: "content"
});

Working example

function initialize() {
    var latLng = { lat: 12.923157, lng: 80.153337 };
    var homelatLng = new google.maps.LatLng(12.923157, 80.153337);
    var mapCanvas = document.getElementById('map');
    var mapOptions = {
        center: latLng,
        zoom: 12,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    var map = new google.maps.Map(mapCanvas, mapOptions);
    var marker = new MarkerWithLabel({
        position: homelatLng,
        map: map,
        labelContent: "ihoser",
        labelAnchor: new google.maps.Point(22, 0),
        labelClass: "map_marker_label", // the CSS class for the label
        labelStyle: { opacity: 0.75 }
    });
    var infowindow = new google.maps.InfoWindow({
        content: "content"
    });
    google.maps.event.addListener(marker, 'click', function (e) {
        infowindow.open(map, this);
    });
    infowindow.open(map, marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

   html, body, #map {
            height: 480px;
            width: 640px;
            margin: 0px;
            padding: 0px;
        }


         .map_marker_label {
             color: red;
             background-color: white;
             font-family: "Lucida Grande", "Arial", sans-serif;
             font-size: 10px;
             font-weight: bold;
             text-align: center;
             width: 40px;       
             height:20px;  
             border: 2px solid black;
             white-space: nowrap;
}

 <script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerwithlabel/src/markerwithlabel.js"></script> 
<div id="map"></div>

Plunker

in markerwithlabel, labelcontent not displaying

1 个答案: