2

How to set label position and style? I tried new google.maps.Marker and new MarkerWithLabel. But both didn't work.

Here is my current map:

enter image description here

Here is my code:

function addMarker(place)
{
    // TODO


    var myLatLng = {lat: parseFloat(place.latitude), lng: parseFloat(place.longitude)};


    var image = 'http://maps.google.com/mapfiles/kml/pal2/icon31.png';

    // var marker = new google.maps.Marker({
    //     position: myLatLng,
    //     map: map,
    //     icon: image,
    //     label: place.place_name + ", " + place.admin_name1,
    //     labelAnchor: new google.maps.Point(0, 32)
    // });

        var marker = new MarkerWithLabel({
            position: myLatLng,
            map: map,
            icon: image,
            label: place.place_name + ", " + place.admin_name1,
            labelAnchor: new google.maps.Point(50, 0),

        });    

    markers.push(marker);

}

UPDATE: Can I set label position with new google.maps.Marker?

Improve this question

3 Answers 3

Reset to default
2

You can assign anchor value for label so it does not overlap with the icon, like this

var marker = new MarkerWithLabel({
    position: latLng,
    map: map,
    labelContent: place["place_name"],
    icon : 'img/icon31.png',
    labelAnchor: new google.maps.Point(20, 0),
    labelClass: "labels", // the CSS class for the label
    labelStyle: {opacity: 0.75}
    });

Note that you can style your label with your CSS knowledge, using labelClass and labelStyle parameters as in the above code.

Improve this answer
5
  • Thank you! Can you post the reference link on MarkerWithLabel? The one in the spec is broken.
    – Kevin King
    Dec 23, 2016 at 6:00
  • Yes, it was moved from svn to github. This is the link of project. github.com/nmccready/…. There is a directory there named as doc.There are examples and some refererence. However, reference is maintained by community and not in a good shape now. I guess this one looks a little nicer github.com/jesstelford/node-MarkerWithLabel. Lastly, if my answer is helpful for you, can you accept the answer by tick sign at left?
    – t.m.
    Dec 23, 2016 at 6:14
  • Thank you. But Can I set label position with only new google.maps.Marker?
    – Kevin King
    Dec 23, 2016 at 7:54
  • Yes the keyword for it is "anchorPoint" see the reference for google.maps.MarkerOptions
    – t.m.
    Dec 23, 2016 at 8:49
  • Thank you, t.m.!
    – Kevin King
    Dec 23, 2016 at 9:00
1

Yes you can, as suggested here Google Maps API page

var image = {
        url: "https://maps.google.com/mapfiles/kml/pal2/icon31.png",
        labelOrigin: new google.maps.Point(15,40)
    }

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    label: place["place_name"] + ", "+ place["admin_name1"],
    icon: image
  });
Improve this answer
0

You have to say where markerwithlabel.js is in index.html, correct? If so, can anyone help me with the syntax?

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .