This is one of the question you find being asked when browse for around 10-15 minutes.
“Your message has not been sent.
Discard your message?” from Gmail.

“Are you sure you want to navigate from this page?
Your message has not been sent.
Press OK to continue, Cancel to stay on the current Page” from Gmail

“Are you sure you want to navigate from this page?
If you leave, your Meebo IM sessions will not be preserved!
Press OK to continue or Cancel to stay on the current page” from meebo

“Are you sure you want to navigate from this page?
You have unsaved changes.
Press OK to continue,or Cancel to stay on the current page” from blogger

Well, what’s common among all 4 of these are that they ask for a confirmation to do some action. This is done generally to prevent losing by data when you click at some link by mistake.

For a web developer, this is one of the simplest thing to code. Javascript provides an inbuilt confirm function. Note that this function always has OK and Cancel button. So we should frame our question to suit these two buttons.

I had a bigger headache when i tried to have this feature in my small map application.
Finally after more than 2 weeks, got how to do this thing without storing it in cookie and doing all other complicated things. I know this is not a great news, but this is really important news for just two souls who don’t mind partying for a week just to celebrate this. :)

Anyway, here is the link to the file that helped me in finding out the order of events and choosing which one might work.
http://sp2hari.com/gmap/events.html

After a few clicking and clearing markers, this is the order i decided to do.

infoWindowBeforeClosed is called before an infoWindow is closed. In this function all the form details are stored into Javascript variables.
infoWindowClosed is called after an infoWindow is closed. Here I ask whether the user wants to continue discarding his details or stay with current infowindow
whatever he chooses, the infowindow will be closed. But I’ll create a new infoWindow at the same point with all those details he already provided with. Hmmmm, i do wish we had callbacks like we have in GTK ;-)

Two things to note here.
1. After reading so much about events, now creating a marker with an infowindow at the initial position is so easy. Don’t know why I was so scared about this sometime back ;)
2. Don’t know why I started thinking about cookies when I can store anything and everything I want to store in javascript variables :-(. Sometimes I do think like an idiot :P

This post is for playing with icons in Google Maps. In the previous post, the last example explained how to add markers when we click on the map. We will try to add custom markers and change the properties of different markers before and after creating them.

In the first example, we’ll create a custom marker instead of the default “G_DEFAULT_ICON”.
First we need marker and shadow images to create custom markers. If you are not interested in creating your own custom markers, then check out
http://www.visual-case.it/cgi-bin/vc/GMapsIcons.pl
for different markers. I downloaded these markers and stored them in a folder called “icons”. Now let us see the addMarker method which adds a custom marker at the place where you click in the map.
function addMarker(overlay, latlng) {
var icon = new GIcon();
icon.image = "icons/blue-pushpin.png";
icon.shadow = "icons/pushpin_shadow.png";
icon.iconSize = new GSize(32, 32);
icon.shadowSize = new GSize(59, 32);
icon.iconAnchor = new GPoint(10, 30);
icon.infoWindowAnchor = new GPoint(10, 30);
marker[markerCount] = new GMarker(latlng, icon);
map.addOverlay(marker[markerCount]);
markerCount = markerCount+1;
document.getElementById("message").innerHTML = "Marker added at latitude "+latlng.lat() + " longitude "+latlng.lng() ;
}
If you aren’t sure about the methods used in the above code, check out the Google Maps API. The above code creates a new Icon and passes it when creating a new Marker
To see how the above code code works, check
http://sp2hari.com/gmap/icon1.html

Now let us make this more complicated. ;). How about the user deciding which type of marker should be added before he adds them?
The code is quite long but certainly not complicated. Before we start with the code, check out how it works :).
http://sp2hari.com/gmap/icon2.html
Two global arrays maintain the different custom markers and their corresponding shadows.
var icons = new Array("blue-pushpin.png", "yellow-pushpin.png", "red-pushpin.png", "purple-pushpin.png", "green-pushpin.png", "lightblue-pushpin.png", "pink-pushpin.png", "blue.png", "yellow.png", "red.png", "purple.png", "green.png", "lightblue.png", "pink.png", "blue-dot.png", "yellow-dot.png", "red-dot.png", "purple-dot.png", "green-dot.png", "lightblue-dot.png", "pink-dot.png");
var shadows = new Array("pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "pushpin_shadow.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png", "msmarker.png");

Just to make things easier, I’ve written a separate createIcon function, which takes the index and creates an icon accordingly. The snippet of this function is same as that of the previous file, with very few modifications. :)
function createIcon(index) {
var ticon = new GIcon();
ticon.image = "icons/"+icons[index];
ticon.shadow = "icons/"+shadows[index];
ticon.iconSize = new GSize(32, 32);
ticon.shadowSize = new GSize(59, 32);
ticon.iconAnchor = new GPoint(10, 30);
ticon.infoWindowAnchor = new GPoint(10, 30);
return ticon;
}

Now “icon” is a global variable and keeps track of what type of icon should be created. The function changeIcon does two jobs. First it updates the preview of the icon to be displayed and changes the value of the icon. addMarker usees this icon variable before creating an icon. So any marker created will have the icon corresponding to the selected one. :)
function changeIcon(index) {
document.preview.src = "icons/"+icons[index];
icon = createIcon(index);
}

Cool right ;). Now how about changing the icon of a marker which is already created. There are two ways of doing this. First one is simple, but won’t work if the shadows differ. Second one is a little complicated, but works for all kinds of markers.
Before we start, check out the this link to see how the markers are changed after they are created.
http://sp2hari.com/gmap/icon3.html
In this example, the only addition to the code is
function changeAllMarkers(index) {
for (var i=0; i marker[i].setImage("icons/"+icons[index]);
}
}

The setImage function changes the image of a marker, but doesn’t allow us to change the shadow. It’s mentioned in the API as follows

Requests the image specified by the url to be set as the foreground image for this marker. Note that neither the print image nor the shadow image are adjusted. Therefore this method is primarily intended to implement highlighting or dimming effects, rather than drastic changes in marker’s appearances. (Since 2.75)

Therefore, the above example is quite easy and useful if there is not much difference in the images we are going to display as markers.

If there is a big difference in the images we are going to display, then the only way is to delete the overlay and create a new marker at the same point.
This example shows how that works.
http://sp2hari.com/gmap/icon4.html
In this example, after you create a marker, change the image and click on the marker again. You can see that the image of the marker changes according to the one selected. :)
The main idea is that when the map is clicked, if it is clicked on a marker, overlay is passed. Else latlng is passed. Thus using this we code the addMarker as follows :)
function addMarker(overlay, latlng) {
if (overlay == null) {
marker[markerCount] = new GMarker(latlng, icon);
map.addOverlay(marker[markerCount]);
markerCount = markerCount+1;
document.getElementById("message").innerHTML = "Marker added at latitude "+latlng.lat() + " longitude "+latlng.lng() ;
}
else {
point = overlay.getPoint();
map.removeOverlay(overlay)
icon = createIcon(document.forms[0].selecticon.selectedIndex);
addMarker(null, point);
}
}

Some tips/tricks for nice coding skills are,

A few examples for C is posted here .

Sample Code 1 :

if (a == 5) {

}
else {
    b = 20;
}

Things to be noticed in the above snippet are.

1. A space between if and “(” .
2. Space in both the sides of the comparison operator.
3. Space between “)” and “{”
4. Space between both the sides of assignment operator (line 2 & 5) . This is true for almost all the operators.
5. Proper indentation of lines 2 & 5. If you are using emacs or vi, check here for your .emacs or .vimrc file .

Sample Code 2

Let us have a function which takes two integers and returns their sum .
The code should be like

int add_numbers (int num1, int num2) {
    return (num1 + num2);
}

The function call will be something like,

int sum;
sum = add_numbers (10, 20);

Things to be noticed in the above snippet is

In the first line in the function declaration,

1. The function name should be as clear as possible.
2. A space between the end of function name and “(” .
3. Spaces are given after every “,” in the function argument list.
4. A space is given between “)” and “{”.

In the second line in the function declaration,

1. A space before “(”. [ This rule is almost global. Apply it everywhere whenever you use “(” ] .

3. The indentation about which was mentioned earlier.

But yes, if your girl friend is a geek or a nerd or a psycho or a fundoo, then you better go for this. ;-)

#define MAGIC “eilouvy43605321″
#define _(p,o,q) (t o#p[0])?(q)
#define __(p,o,q) _(p,o,t-q)
int main(){int t, i; for(i=8;i>0;i–)printf(”%c”, MAGIC[(((t=(MAGIC+7)[i-1])==’_')?62:_(.,==,63):_(@,==,64):__(a,>=,’a'+36):__(A,>=,’A'+10):(t-’0′))]);}

Note :: I wont say the coding style i use is the perfect one. It always depends upon what your team was using till now and how easy it is to read, debug and maintain the code.

Useful Links :