4

I am fairly new to Google Maps- how do I make a google maps AirBnB type marker? I am setting my markers fine, I just need to be able to create a rectangle with a background with text in it like the picture...

I have a "price" variable I can set as well.

Here's my code: 

var marker = new google.maps.Marker({
        position : latlng,
        map : map,
        label: {
            text: price, // $100,000
            color: 'white'
        }
    });

enter image description here

LargeTuna
  • 2,694
  • 7
  • 46
  • 92
  • check out the answers here: http://stackoverflow.com/questions/32467212/google-maps-marker-label-with-multiple-characters – kaskader May 08 '17 at 09:51

1 Answers1

1

A marker Label is typically a letter or number that appears in the marker. You can put more than one letter or number, but the marker won't resize automatically to fit the text. One possible solution would be using an infowindow to display the information you want. There is some good documentation on infowindows here:

https://developers.google.com/maps/documentation/javascript/infowindows

Another alternative would be to use custom markers:

https://developers.google.com/maps/documentation/javascript/custom-markers

Google allows you to use custom markers instead of the default ones, you can follow the instructions for simple marker icons here:

https://developers.google.com/maps/documentation/javascript/markers#simple_icons

The only drawback with the custom icons is if you are listing price information like in the image you posted, you will need a custom icon for each price.

I hope this helps!

Stephen Michael Hammit
  • 947
  • 5
  • 10