I would like to display name of the place next to the marker as shown in the below screen shot. Currently I don't need rest of the details appearing in Google Maps. All I care is that name of the hotel should appear along with the Marker.
Example: Courtyard Marriott Hotel - Google Maps link which clearly shows the name.
I have created demo jsFiddle (doesn't show the label)
var googleMap;
var hotelLocation = {
lat: 43.681592,
lng: -79.713612
};
var mapCenter = hotelLocation; //{ lat: 43.690497, lng: -79.966831 };
google.maps.event.addDomListener(window, 'resize', function() {
//https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive
var center = googleMap.getCenter();
google.maps.event.trigger(googleMap, "resize");
googleMap.setCenter(center);
});
function InitializeGoogleMaps() {
//http://www.latlong.net/convert-address-to-lat-long.html
//90 Biscayne Crescent, Brampton, ON - Address of Hotel - { lat: 43.681592, lng: -79.713612 };
googleMap = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: mapCenter
});
var marker = new google.maps.Marker({
position: hotelLocation,
map: googleMap,
title: 'Courtyard by Marriott'
});
}
InitializeGoogleMaps();
I have gone thru many search terms (as I am not sure what is the right word for this label and gone thru Maps Marker API too) but so far no luck. I think below thread seems to be on the same lines however I am hoping that there will be built in support inside Google maps rather then going for extra lib.
It is more likely for comment, but excuse me (I can not comment yet ;))
Positioning can be done over margin, instead of counting by marker size.
It is tiny update of ndd jsFiddle in comment here https://stackoverflow.com/a/34145265/2686510
http://jsfiddle.net/6t3pyr94/
Someone could find it helpful to have css freedom of label position.
.map-marker-label {
position: absolute;
color: red;
font-size: 16px;
font-weight: bold;
/* Use margin to position the text */
/* top, left position is the place of marker position */
margin-top: -45px;
margin-left: 20px;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With