开发者

how to change the color of marker in google map api 3

I am looking for a solution to change the color of the maker in the Google Maps in API V3. I want to change the color of the maker on the mouse hover. If anyone got the solution please post them, I would be开发者_JAVA技巧 very thankful. thanks in advance


You have to customize marker property and use custom marker and shadow images for this. But this is in Map API 2 so sorry in advance for that.

var normal_icon = new GIcon();
normal_icon.image = "images/google_marker_green.png";
normal_icon.shadow = "images/shadow-google_marker_green.png";
normal_icon.iconSize = new GSize(20.0, 34.0);
normal_icon.shadowSize = new GSize(38.0, 34.0);
normal_icon.iconAnchor = new GPoint(10.0, 17.0);
normal_icon.infoWindowAnchor = new GPoint(10.0, 17.0);

var hover_icon = new GIcon();
hover_icon.image = "images/google_marker_blue.png";
hover_icon.shadow = "images/shadow-google_marker_blue.png";
hover_icon.iconSize = new GSize(20.0, 34.0);
hover_icon.shadowSize = new GSize(38.0, 34.0);
hover_icon.iconAnchor = new GPoint(10.0, 17.0);
hover_icon.infoWindowAnchor = new GPoint(10.0, 17.0);

var lat="Your lat. point";
var long="Your long. point";

map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(lat, long), 15);
map.setUIToDefault();
var point = new GLatLng(lat,long);
var marker = new GMarker(point,normal_icon);
var message="Custom message";
GEvent.addListener(marker, "click", function() {
  map.openInfoWindowHtml(point, message);
});
map.addOverlay(marker);

function bindInfoWindow(marker, map, infoWindow, html) {
      google.maps.event.addListener(marker, 'mouseover', function() {
        marker.setIcon(hover_icon);
      });
      google.maps.event.addListener(marker, 'mouseout', function() {
        marker.setIcon(normal_icon);
      });
    }

You can find exact example from http://smmtn.com/sandbox/gmaps-marker-hover/

Thanks and Regards

Haresh

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜