<html>
<head> <title>*Google* Maps JavaScript API v3: Custom Marker Demo</title> <script type=*"text/javascript"* src=* "http://maps.googleapis.com/maps/api/js?v=3.5&sensor=true"*></script> <script> * function* CustomMarker(latlng, map) { google.maps.OverlayView.call(*this*); * this*.latlng_ = latlng; // Once the LatLng and text are set, add the overlay to the map. This will // trigger a call to panes_changed which should in turn call draw. * this*.setMap(map); } CustomMarker.prototype = *new* google.maps.OverlayView(); CustomMarker.prototype.draw = *function*() { * var* me = *this*; * var* color ="#00ff00" * var* html = "<div style='position: absolute; margin: 0; padding:0; background-color:transparent; background-image: url(" + "BusWithBump_N_48x64.png" + ");height: 63px; width: 48px;'>" + "<div>" + "<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:10px; margin-top:2px; text-align:left; background-color:" + color + ";width:27px; height:1px; overflow: hidden; text-indent:11px;' ></div>" + "<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:9px; margin-top:3px; text-align:left; background-color:" + color + ";width:29px; height:1px; overflow: hidden; text-indent:11px;' ></div>" + "<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:8px; margin-top:4px; text-align:left; background-color:" + color + ";width:31px; height:3px; overflow: hidden; text-indent:11px;' ></div>" + "<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:7px; margin-top:7px; text-align:left; background-color:" + color + ";width:33px; height:3px; overflow: hidden; text-indent:11px;' ></div>" + "<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:6px; margin-top:10px; text-align:left; background-color:" + color + ";width:35px; height:2px; overflow: hidden; text-indent:11px;' ></div>" + "<div class='busLabel' style='position: absolute; margin: 0; padding:0; margin-left:2px; margin-top:1px; font-size:7pt; text-align:center; width:41px; height:10px; overflow: hidden;' >" + 20 + "</div>" + "</div>"; //html += "<div class='busLabel' style='position: absolute; margin: 0; padding:0; color: black; margin-top:16px;margin-left:4px;'>20</div>"; html += "</div>" + "<div><div class='busLabel' style='background-color: black; color:white; margin-top:8px; margin-left:8px; margin-right: 35px;'>" + "<div class='busLabel' style='position: absolute; margin-top:35px; font-size:7pt; text-align:center; width:30px; height:10px; overflow: hidden;' >" + 1054 + "</div></div></div>"; //@3 issue 3 center the busId // Check if the div has been created. * var* div = *this*.div_; * if* (!div) { // Create a overlay text DIV div = *this*.div_ = document.createElement('DIV'); // Create the DIV representing our CustomMarker div.style.border = "1px red solid"; div.style.position = "absolute"; div.style.paddingLeft = "0px"; div.style.cursor = 'pointer'; //div.innerHTML = html; does not work // creating another DIV and assign inner HTML does not work either. * var* imgDiv = document.createElement("div"); imgDiv.innerHTML = html; div.appendChild(imgDiv); /* *********** THIS WORKS ******* * *********** comment the above imgDiv creation, html and appending (3 lines) * *********** uncomment this park to see it working ok. * *********** problem seems to be my custom image html * var img = document.createElement("img"); img.src = "http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png";; div.appendChild(img);*/ google.maps.event.addDomListener(div, "click", *function*(event) { google.maps.event.trigger(me, "click"); }); google.maps.event.addDomListener(div, "mouseover", *function*(event) { google.maps.event.trigger(me, "mouseover"); }); google.maps.event.addDomListener(div, "mouseout", *function*(event) { google.maps.event.trigger(me, "mouseout"); }); // Then add the overlay to the DOM * var* panes = *this*.getPanes(); panes.overlayImage.appendChild(div); } // Position the overlay * var* point = *this*.getProjection().fromLatLngToDivPixel(*this*.latlng_); * if* (point) { div.style.left = point.x + 'px'; div.style.top = point.y + 'px'; } }; CustomMarker.prototype.remove = *function*() { // Check if the overlay was on the map and needs to be removed. * if* (*this*.div_) { * this*.div_.parentNode.removeChild(*this*.div_); * this*.div_ = *null*; } }; CustomMarker.prototype.getPosition = *function*() { * return* *this*.latlng_; }; * var* map; * var* overlay; * var* iw; * function* initialize() { * var* opts = { zoom: 4, center: *new* google.maps.LatLng(-25.363882,131.044922), mapTypeId: google.maps.MapTypeId.ROADMAP } map = *new* google.maps.Map(document.getElementById("map"), opts); iw = *new* google.maps.InfoWindow({ content: "Hello" }); * var* count = 0; overlay = *new* CustomMarker(map.getCenter(), map); google.maps.event.addListener(overlay, "click", *function*() { iw.setContent("you clicked me!") iw.open(map, overlay); }); google.maps.event.addListener(overlay, "mouseover", *function*() { count++; iw.setContent("this is mouseover "+count); iw.open(map, overlay); }); google.maps.event.addListener(overlay, "mouseout", *function*() { //iw.setContent("this is mouseout"); iw.close(); }); } * function* addOverlay() { overlay.setMap(map); } * function* removeOverlay() { overlay.setMap(*null*); } </script> </head> <body onload="initialize()"> <div id=*"map"* style="width: *320px*; height: *480px*;">map *div*</div> <div> <input type=*"button"* value=*"Add Marker"* onclick="addOverlay()"> <input type=*"button"* value=*"Remove Marker"* onclick="removeOverlay()"> </div> </body> </html> -- You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group. To view this discussion on the web visit https://groups.google.com/d/msg/google-maps-js-api-v3/-/NkfDzzktbkoJ. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.
![http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png"](https://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png"){kind=link}