Embedded maps with routes

RNS got updated again. Now it allows to embed on other webpages maps with routes created with RNS. So if You want to present Your last bike trip, morning jogging route or provide directions how to get to Your place for example from airport – You have now tool.

Just go to RNS site, register (You can be anonymous, but anonymous routes can be edited/deleted by anyone), create route (with custom icons and labels for icons) and on page with route You got snippet to copy to Your page.

Click on icons to get labels displayed. Default map size is 600×400 and if You need to change widget size it is hard-coded in URL (last two numbers). Following example is generated with code:

<script type="text/javascript"
src="http://www.run-n-share.com/route/ifr/1/490/400">
</script>

Changing markers icons with Google Maps API

Almost year ago I’ve wrote short info about how to change icons in markers placed already on map with Google Maps API. It is cumbersome method, since it requires to delete and create markers. It is problem when with markers are associated some event listeners, since they need to be recreated also.

But then was version 2.75 release of Google Maps API (I think it was around March 2007). Starting from then GMarker got setImage method, for changing images on already placed on map markers. But, somehow traffic to my old post is still notable, so I decided to write short example how setImage can be used.

       24 var new_icon = new GIcon()
       25
       26 new_icon.image = "http://nhw.pl/images/cross.png"
       27 new_icon.size = new GSize(16,16)
       28 new_icon.iconAnchor = new GPoint(8,9)
       29 new_icon.infoWindowAnchor = new GPoint(7,7)
       30
       31 var opt
       32 opt = {}
       33
       34 opt.icon = new_icon
       35 opt.draggable = false
       36 opt.clickable = false
       37 opt.dragCrossMove = true
       38
       39
       40 function load() {
       41   if (GBrowserIsCompatible()) {
       42     map = new GMap2(document.getElementById("map"));
       43     map.setCenter(new GLatLng(52.2419, 21.01), 4);
       44     map.addControl(new GLargeMapControl())
       45     map.addControl(new GMapTypeControl())
       46
       47     GEvent.addListener(map, "click", function (marker, point) {
       48       if (!marker) {
       49         new_marker = new GMarker(point,opt)
       50         map.addOverlay( new_marker )
       51         markers.push(new_marker)
       52       }
       53     }
       54     )
       55   }
       56 }

First in lines 24-29 I create icon object. Next in lines 31-37 I create options for icon. In this example most important is line 34 when I use icon created in lines 24-29.

In lines 40-56 is function responsible for map creation. It also register one event listener, to create new markers on map. All markers are stored in markers array.

Now we can use this array to iterate through markers placed on map by user and change icon:

       58 function changeIcons() {
       59   for (i=0; i< markers.length; i++ ) {
       60     markers[i].setImage("http://nhw.pl/images/cancel.png")
       61   }
       62 }

setImage is method of marker object (thus is called on elements of array with markers created after click event). As argument it takes URL for new image. Notice, that icon object (and it's properties like draggable or clickable does not change). And that is it!

Go to http://nhw.pl/download/setimage.html to see setImage in action (code above is taken from this page).

When setImage does not work?

And now a little warning. setImage is meant to change only marker image, so if You did some fancy shadow (shadow property of GIcon) setImage does not update shadow property. setImage does not change printed image also, so if You expect users will print maps from Your application, this method won't work properly. If one of this true for Your application - You need to stick with delete/create method.

And finally - setImage was made available in API version 2.75, it is not available in stable version of API. As for today (2007.09.18), stable version is based on API in version 2.73.

Do You want to test Yourself as a startup founder?

Nowadays it is right time to start new venture, they say. This is especially true in Web2.0 world! Do You want to test Yourself as a web20 startup founder? I’m sure You do, and now it is possible at even lower cost! Check out Startup-Tycoon!

Chose Yours startup location and than carefully use Yours points to create company, with features most valued by market. But what features are those most valued? Watch trends in blogosphere! If You are interested in this part of InterTubes, You will simile when You will watch Startup-Tycoon’s blogosphere. But if You are from dark side of force, game also have something for You, but remember, dishonesty rarely pays!

And most of all have a fun playing Startup-Tycoon.

Startup-Tycoon: why, when and what for?

This game is a result of our ( Daniel Owsia?ski, Jaros?aw Rzeszótko, Zbigniew Sobiecki and my) Rails Rumble participation. We wanted to test our selfs (this was first time we worked together and no one from us took part in similar contest before) and (most importantly!) we wanted to have some fun.

I hope You will have at least so much fun we had during 48 hours of competition.

Support us and vote for Startup-Tycoon

We want You to help us and vote for our application. Just go to the voting site, register and give us Yours support. It is good chance that Startup Tycoon won’t end as an episode for Rails Rumble 2007.

Google Maps – quick tip for finding coordinates

Sometimes I need to find out longitude and latitude of certain points. I use Google Maps to find place, and… Until last weekend I have clicked link to this page and looked in URL. Usually there was lat and lng. But this was good enough when I need find it for one or two places.

This weekend we were writing application for Rails Rumble. And I have developed much more efficient way. Find Your place on Google Maps, center page and in Firebug console write:

gApplication.getMap().getCenter()

It will dump returned JS object into string. First number it is latitude and second one – longitude.

Of course You need Firefox with Firebug installed.