How to customize your MapGame

Home

Demo

1. Hello 2. Chatroom 3. MapChat 4. MapGame 5. Friends' Status

Download

Documentation

Getting Started API Reference Tutorial FAQ How to - MapGame How to - Friends' Status

Community

Forum Blog Get Involved

Credit

ICEspresso Chat Framework

ICEspresso Connection Pool

Docs > Howto > MapGame

How to customize your MapGame

For running and customizing your own MapGame, you may refer to some FAQ items listed here.

Table of Contents

Start Running
1. 1.1. How to start running my own MapGame?
2. 1.2. How to play the MapGame?
Start Customizing

Start Running

1.1. How to start running my own MapGame?

After download the MapGame source package, you need to get your own Google Maps API key and free ICEspresso account.

Open the source file mapgame.html with any text editor then proceed to find and replace:

Find the string “key=", replace the key value with your Google Maps API key

<script 
src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=REPLACE_YOUR_KEY_HERE" 
type="text/javascript"></script>

Find the string “user:", replace values of user ID and password with your free ICEspresso account

user: "REPLACE_YOUR_USERID_HERE",
password: "REPLACE_YOUR_PASSWORD_HERE"

Save the mapgame.html and run it under your live or local web.

goTop

1.2. How to play the MapGame?

We have prepared an online MapGame user manual, please click the link to open it.

goTop

Start Customizing

2.1. How to change the icons to my own images?

The original icon files in the source package are located under directories images/females and images/males. You may follow the directory structure for changing the original icons to your own, you may:

1. Copy your own icon files to directories images/females or images/males.

2. Open mapgame.html in text editor and find the string “var img_array", replace the file names with your own icons' in the array.

var img_array = ["" , "images/females/f50_48.jpg", "images/females/f35_48.jpg", ...

3. Find the string "id="woman_div"", change the file paths in respective tags <img src="images/females/xxx.jpg"... > for female icons.

<div id="woman_div" align="center">
<a href="javascript:void(0)" onclick="$('#image_select').val(1); showBorder('f1');">
<img src="images/females/f50_48.jpg" ...

4. Find the string "id="man_div"", change the file paths in respective tags <img src="images/males/xxx.jpg"... > for male icons.

<div id="man_div" align="center">
<a href="javascript:void(0)" onclick="$('#image_select').val(1); showBorder('m1');">
<img src="images/males/m1_48.jpg" ...

goTop

2.2. How to insert the MapGame to my existing page?

There are some tips for integrating MapGame to your existing web pages:

Tip 1. Do not include any HTML document type tag in your web page, such as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

Tip 2. Copy-and-paste the necessary styles and javascript codes in front of tag </head> from mapgame.html to your web page.

Tip 3. Add "onunload="GUnload()"" to tag <body> for unloading Google Map on onunload event.

<body onunload="GUnload()">

Tip 4. Copy-and-paste the content between <div id="main_div"> and the last </div> (both included) from mapgame.html to where the MapGame UI should be displayed of your web page.

<div id="main_div">
...
...
...
</div>
<div id="loading" align="center">
    Loading...
</div>

Tip 5. Copy-and-paste the last javascript codes in front of </body> from mapgame.html to your web page.

<script language="javascript">
chat = icespresso.initialize();

// Register keypress event
if (typeof window.addEventListener != 'undefined') {
    // Gecko, Safari, Konqueror and standard
    document.addEventListener('keypress', getKey , false);
} else if (typeof document.addEventListener != 'undefined') {
    // Opera 7
    document.addEventListener('keypress', getKey, false);
} else if (typeof window.attachEvent != 'undefined') {
    // Win IE
    document.attachEvent('onkeyup', getKey);
}
</script>

goTop

2.3. How to change the size of the map?

Find the string "#map" in the source, then change the values of width and height of your map:

#map {
    width: 500px;
    height: 400px;
    border: 1px solid grey;
}

goTop

2.4. How to change the styles of the chat log pane?

Find the string "#chat_log" in the source, then change the style attributes you want:

#chat_log {
    width: 230px;
    height: 450px;
    overflow-x: hidden;
    overflow-y: scroll;
    /* overflow:-moz-scrollbars-vertical !important;!¡L */
    border: 1px solid #eee;
    color: #000;
    line-height: 10px;
    margin-top: 5px;
    font-family: "Trebuchet MS", Tahoma, Georgia, Century, Arial;
}

goTop

2.5. How to remove the link of historic message?

The link of each historic message in chat log pane can bring you back to the position of the message took place. For removing the link, you may find the string "log_div.innerHTML" in the source, then remove the tag pair "<a href=...>" and "</a>" in the following statement carefully:

log_div.innerHTML = '<div class="chating_div">'+subUUID(nick)+
': <a href="#" onClick="openHistory(\''+marker.getPoint().lat()+
'\' , \''+marker.getPoint().lng()+'\' , \''+msg+'\')">'+msg+
'</a></div><br />'+log_div.innerHTML;

goTop

2.6. How to change the styles of nickname beneath icons on map?

Find the string ".labelClass {" in the source, then change the style attributes you want:

.labelClass {
    background-color: gray;
    font-size: 11px;
    color: white;
    white-space: nowrap;
}

goTop

2.7. How to change the default location?

Original MapGame will auto-detect the language of user's browser then locate to the corresponding place:

Traditional Chinese - Taipei City, Taiwan
Simplified Chinese - Beijing, China
Others - Mountain View, CA, USA (Google's office)

If you want to change the default location, you may find the string "languageinfo", then change the latitude and longitude to where you want with different language information:

var languageinfo = navigator.language? navigator.language : navigator.userLanguage;
if (languageinfo == 'zh-TW' || languageinfo == 'zh-tw') {
    myInfo["lat"] = 25.035405;    // taipei
    myInfo["lng"] = 121.520255;
}
else if (languageinfo == 'zh-CN' || languageinfo == 'zh-cn' ) {
    myInfo["lat"] = 39.908173 ;    // beijing
    myInfo["lng"] = 116.397947;
}
else {
    myInfo["lat"] = 37.423088;  // google, CA
    myInfo["lng"] = -122.085121;
}

goTop

2.8. How to change the styles of the text inputs?

Find the string "input, textarea" in the source, then change the style attributes you want:

input, textarea {
    border: 1px solid #006;
    background: #ffc;
    font-family: "Trebuchet MS", Tahoma, Georgia, Century, Arial;
    font-size: 12px;
}

goTop

2.9. How to change the styles of the buttons?

There are two style classes for different button sets: button and op_button. Find string ".button" and ".op_button" respectively in the source, then change the style attributes you want:

.button {
    border: 1px solid #006;
    background: #F0F2BF;
    font-family: "Trebuchet MS", Tahoma, Georgia, Century, Arial;
    font-size: 12px;
}

.op_button {
    border: 1px solid #006;
    background: #CBDAFE;
    font-family: "Trebuchet MS", Tahoma, Georgia, Century, Arial;
    font-size: 12px;
}

goTop

2.10. How to change the styles of the address changing dialog?

Find the string "#query_address" in the source, then change the style attributes you want:

#query_address {
    z-index: 9000;
    position: absolute;
    top: 250px;
    left: 225px;
    background-color: #CCCCFF;
}

goTop

Developer Guide

Demo Codes

Support Resources

Latest Blog Posts

How to customize your MapGame