Question

60

Text Labels on Google Maps v3

rated 0 times [ 64] [ 4] / answers: 1 / hits: 44732 / 11 Years ago, fri, november 22, 2013, 12:00:00

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)

The

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

alorafrancisl

Add To Favorites

Follow

Total Points: 80

Total Questions: 96

Total Answers: 102

Location: Ukraine

Member since Sun, Dec 13, 2020

4 Years ago

answered 11 Years ago patienceannel · Accepted 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&amp;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>