I have renamed the html file this time. I am talking to my IT to have it posted on a public server,,
-- 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/-/I_l8g0Sbxa0J. 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.
<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>
<<attachment: BusWithBump_N_48x64.png>>
![http://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png"](https://gmaps-samples.googlecode.com/svn/trunk/markers/circular/bluecirclemarker.png"){kind=link}