Category Archives: Google Map

Google Map Markers with Labels

Google Map, Javascript

Google Map has a nice support library that allows you to create markers with labels attached. This is nice to let the map visitor have a quick idea what the pins on a map represents. You can make your labels simply digits to number the pins, alpha characters to index the pins, or add a short word or phrase to each pin. Very nice.

If you are looking to add labels to your markers on a Google Map, the following links are important to you:

Use of the library is simple, simply:

  1. Include the markerwithlabel.js library
  2. Make a marker using “new markerwithlabel” (see the example page link above)

    3. QED

Note, the new MarkerWithLabel allows you to add a few new parameters that define the label. Simply replace the old “new marker” declaration with a declaration of the following format:

     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
       labelStyle: {opacity: 0.75}
     });

It’s great, use it.

Warning about Google Maps and WordPress

CSS, Google Map, Wordpress

Warning. As I was working on my previous post, I notices an interesting incompatibility between the WordPress template I was using and Google Maps. The template in use has a CSS configuration of:

.entry_content img { max-width: 100% ; }

The previous css seems minor enough, but, this declaration affected the Google Map on the page. The result is a map that shows no zoom controls. Instead, where the controls should be, they display as small white marks. In the event that you happen upon a template that does not seem to be compatible with Google Maps (because the zoom controls are missing) check to see if there is a CSS declaration defining “img {max-width: 100% }” in a manner it might be affecting the map. If so, you will need to create a CSS declaration that will override this command. It appears that img max-width must be configured to “none,” or the controls will be incorrectly displayed.