{"id":739,"date":"2014-06-06T16:57:56","date_gmt":"2014-06-06T16:57:56","guid":{"rendered":"http:\/\/www.advancedwebhelp.com\/blog\/?p=739"},"modified":"2014-06-08T23:53:39","modified_gmt":"2014-06-08T23:53:39","slug":"google-map-markers-with-labels","status":"publish","type":"post","link":"https:\/\/www.advancedwebhelp.com\/blog\/2014\/google-map-markers-with-labels","title":{"rendered":"Google Map Markers with Labels"},"content":{"rendered":"<p>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.<\/p>\n<p>If you are looking to add labels to your markers on a Google Map, the following links are important to you:<\/p>\n<ul>\n<li><a href=\"http:\/\/google-maps-utility-library-v3.googlecode.com\/svn\/tags\/markerwithlabel\/\">Javascript Library<\/a><\/li>\n<li><a href=\"http:\/\/google-maps-utility-library-v3.googlecode.com\/svn\/trunk\/markerwithlabel\/docs\/examples.html\">Usage Examples<\/a>\n<\/li>\n<li><a href=\"http:\/\/google-maps-utility-library-v3.googlecode.com\/svn\/trunk\/markerwithlabel\/docs\/reference.html\">Reference Manual<\/a><\/li>\n<\/ul>\n<p>Use of the library is simple, simply:<\/p>\n<ol>\n<li>Include the markerwithlabel.js library<\/li>\n<li>Make a marker using &#8220;new markerwithlabel&#8221; (see the example page link above)<\/li>\n<\/li>\n<p>QED<\/li>\n<\/ol>\n<p>Note, the new MarkerWithLabel allows you to add a few new parameters that define the label.  Simply replace the old &#8220;new marker&#8221; declaration with a declaration of the following format:<\/p>\n<pre>\r\n     var marker = new MarkerWithLabel({\r\n       position: homeLatLng,\r\n       draggable: true,\r\n       raiseOnDrag: true,\r\n       map: map,\r\n       labelContent: \"$425K\",\r\n       labelAnchor: new google.maps.Point(22, 0),\r\n       labelClass: \"labels\", \/\/ the CSS class for the label\r\n       labelStyle: {opacity: 0.75}\r\n     });\r\n\r\n<\/pre>\n<p style=\"clear: both; width: 100%\">It&#8217;s great, use it.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22,16],"tags":[],"class_list":["post-739","post","type-post","status-publish","format-standard","hentry","category-google-map","category-javascript"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/739","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/comments?post=739"}],"version-history":[{"count":2,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/739\/revisions"}],"predecessor-version":[{"id":749,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/posts\/739\/revisions\/749"}],"wp:attachment":[{"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/media?parent=739"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/categories?post=739"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.advancedwebhelp.com\/blog\/wp-json\/wp\/v2\/tags?post=739"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}