Menu
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:
Any help from anyone who has faced similar issues, will be very appreciated.
Cheers,
Rohitesh
739
Or drop a pin by tapping and holding a place on the map. At the bottom, tap the name of the place. Tap Label.
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>
You can use InfoBox, but you cannot use hover events with it by adding event listeners to the map. You can add a class to your info boxes (the default class is infobox), so you should be able to add hover events directly to this using jQuery or JavaScript. Here's the code I use to not display a marker with the label:
var regionsMarkerInfo = [{markerLabel: 'Label Name', coordinates: [50, -120], markerTranslation: "Label Name"}, { another object }, etc... ],
regionsOptions = [],
regionLabel = [];
for(var r=0; r<regionsMarkerInfo.length; r++){
regionsOptions[r] = {
content: "<a href='http://"+window.location.host+"/Destinations/Regions/" + regionsMarkerInfo[r].markerLabel + ".aspx'>"+ regionsMarkerInfo[r].markerTranslation + "</a>"
,boxStyle: {
textAlign: "left"
,fontSize: "18px"
,whiteSpace: "nowrap"
,lineHeight: "16px"
,fontWeight: "bold"
,fontFamily: "Tahoma"
}
,disableAutoPan: true
,position: new google.maps.LatLng(regionsMarkerInfo[r].coordinates[0], regionsMarkerInfo[r].coordinates[1])
,closeBoxURL: ""
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: true
,boxClass: "regionLabel"
};
regionLabel[r] = new InfoBox(regionsOptions[r]);
regionLabel[r].open(map);
}
Then you should be able to do this to create a hover event:
$('.regionLabel').hover(function(){}, function(){});
or
document.getElementsByClassName('regionLabel).addEventListener('mouseover', ... )
If you need to see this in action:
go here: http://travelalaska.dawleyassociates.com/Destinations/Regions.aspx
open up your console and type (copy/paste): $('.regionLabel').hover(function(){console.log('hovered');}, function(){console.log('unhovered');});
hover over the big labels and you'll see the text output in the console.
35
You can tell Google Maps to use an icon whose URL is an SVG image. In most browsers this can also be a data URI. If you know how to generate the appropriate SVG for the marker you want client-side, then you can do this and then use a Base64 library to convert the SVG string into Base64 data, prefix it with 'data:image/svg+xml;base64,' and it's then usable as a data URI.
Note that Internet Explorer seems a little more fussy, and I found I needed the scaledSize property as well as the usual size, origin, anchor and url properties to get any SVG to render.
This approach allows you to use a full SVG image, including styled text, so you can then create a marker with a label with whatever styling you need.
32
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
