Tuesday, March 23, 2010

Google Maps, Raphael JS and browsers

The Google Maps renders shapes in svg format for most of the browsers and vml format for Internet Explorer. It seems that IE9 will adopt the svg format finally.

The use of these shapes is useful when you want to draw not standard paths or images.
Which format is better I don't know, I use Mozilla Firefox and Google Chrome most of the time, but Google Maps + vml + Raphael format works better, in this case in Internet Explorer.

In the map below there is a nice ball (click on the marker to see it).
If you are viewing this page in a browser with svg support you will notice that there is a invisible layer on the map close to the ball which doesn't let you handle (drag) the map.
But if you are viewing the page with in a browser with vml support you will notice that you can handle everything around the ball.

The code to handle the ball:
var mymark=new GMarker(latlng);
map.addOverlay(mymark);
GEvent.addListener(mymark, 'click', function(){
x.show();
x.animate({cx: 100}, 2000, "elastic");
x.click(reset);
function reset(){
x.animate({cx: 50}, 2000, "elastic");
}
});


Click on the marker or the ball to animate the ball.

No comments:

Post a Comment