Text Labels on Google Maps v3
I recently migrated from v2 to v3 on Google Maps, and one of the functionalities that broke was using text labels, which I was implementing using a third party library (BpLabel)
Question:
How can I display text labels in Google Maps v3, which have events like "mouseover" that get triggered?
Note: I don't want a marker to be visible alongwith the text label. I want ONLY the text lable to be visible
What I Have Tried:
- Used InfoWindow, but it is too cluttered and the overlay needs to be explicitly closed, whereas I need the overlay to be closed when the mouse pointer hovers over it
- Used InfoBox, which is not as cluttered as InfoWindow, but this also doesn't have event triggers like mouseover
Any help from anyone who has faced similar issues, will be very appreciated.
Cheers,
Rohitesh
Answer
I think the only way to go this is to use markers as labels, i.e. change shape of the marker to your desired labels. Two ideas how to do that:
1) Use the modified markers with custom shape and text - e.g. image icons generated using Google Image Charts and Infographics (like here or here). But the google API to create such icons is deprecated without remedy! Or isn't?? There is a confusion, see my comment here.
2) Use markerwithlabel library (found easily by googling "google maps text in marker"). With this library, you can define markers with labels with or without marker icons. If you don't want the marker icon, just set icon: {}:
var marker = new MarkerWithLabel({
position: homeLatLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
icon: {}
});
Then you can work with it as with normal marker, i.e. add InfoWindow for mouseover events!
Here is the example how to use this library for what you need.
Compete code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>MarkerWithLabel Mouse Events</title>
<style type="text/css">
.labels {
color: red;
background-color: white;
font-family: "Lucida Grande", "Arial", sans-serif;
font-size: 10px;
font-weight: bold;
text-align: center;
width: 40px;
border: 2px solid black;
white-space: nowrap;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3&sensor=false"></script>
<!-- <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>-->
<script type="text/javascript" src="markerwithlabel.js"></script>
<script type="text/javascript">
function initMap() {
var latLng = new google.maps.LatLng(49.47805, -123.84716);
var homeLatLng = new google.maps.LatLng(49.47805, -123.84716);
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 12,
center: latLng,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new MarkerWithLabel({
position: homeLatLng,
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
icon: {}
});
var iw = new google.maps.InfoWindow({
content: "Home For Sale"
});
var ibOptions = {
content: 'content'
// other options
};
var ib = new google.maps.InfoWindow(ibOptions);
ib.open(map, this);
google.maps.event.addListener(marker, "mouseover", function (e) { ib.open(map, this); });
google.maps.event.addListener(marker, "mouseout", function (e) { ib.close(map, this); });
}
</script>
</head>
<body onload="initMap()">
<p>Try interacting with the marker (mouseover, mouseout, click, double-click, mouse down, mouse up, drag) to see a log of events that are fired. Events are fired whether you are interacting with the marker portion or the label portion.</p>
<div id="map_canvas" style="height: 400px; width: 100%;"></div>
</body>
</html>