最新google中国地图推出了mapplet的测试版，这个在英文版中很受欢迎的功能终于推出了。目前还没正式进行推广。
在google地图API的文档说明上已经增加了新的链接。http://code.google.com/intl/zh-CN/apis/maps/documentation/mapplets/
最新google中国地图推出了mapplet的测试版，这个在英文版中很受欢迎的功能终于推出了。目前还没正式进行推广。
在google地图API的文档说明上已经增加了新的链接。http://code.google.com/intl/zh-CN/apis/maps/documentation/mapplets/
什么是 Mapplets？
Mapplets 是在 Google 地图中运行的迷你应用程序。您可以在 Google 地图上创建添加新功能或标注数据的 Mapplet。
Mapplets 与地图 API 相似。主要的区别是 Mapplets 在 Google 地图上运行，而传统地图 API 则用于在其他网站上创建地图。
为什么要创建 Mapplets？
Mapplets 将您的品牌展示给数以万计的 Google 地图用户，且由您掌控其中的内容。
您可以链接回您的网站，并在您认为合适的情况下将 Mapplet 商业化。
Mapplets 的编写极其简单，只需 5 分钟您就可以创建出自己的处女作！
无需任何特殊注册或下载。
Mapplet 是一个封装有迷你网页的 XML 文件。您可以在此迷你网页中放入任何可以放入正常网页的东西，包括 HTML、Javascript 和 Flash。Google 提供了允许 Mapplet 与 Google 地图站点通讯，从远程网站中获取内容并存储用户偏好的 Javascript API。
使用下面的 URL 使他人可运行您的 Mapplet：http://ditu.google.com/ig/add?synd=mpl&pid=mpl&moduleurl=< URL of your mapplet>
说穿了，mapplet就是通过xml进行存储，并含有地图相关脚本的配置文件。如果熟悉GMap API的话，还是比较容易进行开发的。
简单的做了一个demo，大家可以看看http://ditu.google.com/ig/add?synd=mpl&pid=mpl&moduleurl=http://lab.dianping.com/google_maplet/shvalentinesday.xml
<ModulePrefs title="上海情人节餐厅" description="情人节，与心爱的人在浪漫之晚共度晚餐，说出你的爱，享受这浪漫时节。" author="大众点评网" author_email="kefu@dianping.com" screenshot="http://lab.dianping.com/google_maplet/valentinesday.png" thumbnail="http://lab.dianping.com/google_maplet/valentinesday-thumb.png" height="350">
<Require feature="sharedmap" />
<Require feature="dynamic-height" />
</ModulePrefs>
ModulePrefs节点中的一些属性，指定了此mapplet的一些属性，通过增加一些子节点，可获得不同的功能。
- title--标题
- description--说明
- author--作者
- author_email--作者邮件地址
- screenshot--截屏
- thumbnail--缩略图
- height--高度(似乎指定了没用，在实际页面中，超出高度，总会被隐藏掉，也许是个bug)
<Require feature="sharedmap"/> 可指示 gadget 加载允许它与地图通讯的 Mapplets Javascript API
还有一些Require可以用来保存用户设定数据等等。具体参见：http://code.google.com/intl/zh-CN/apis/maps/documentation/mapplets/services.html#Storing_User_Preferences
可喜可贺的就是Google地图终于提供官方的地址解析了：http://code.google.com/intl/zh-CN/apis/maps/documentation/mapplets/services.html#Geocoding_Object
Content节点就是用CDATA保存了我们需要调用地图的部分，地图调用部分都是使用GMap的API，所以如果要开发mapplet必然要对GMap API有所了解，其实使用起来还是比较方便的。可以使用几乎所有html标记和JavaScript脚本。
我的脚本就不做详细的解释了。如果有需要的话，可以再向我索要说明。
GoogleMappletContent
<style>
h3, p{font-size:13px;}
ul, li{padding:0;margin:0;list-style:none;}
li{margin-bottom:10px;}
ul li h3{margin:0;background:#e1ecfe;cursor:pointer;padding:4px;}
ul li p{margin:0;padding:0;}
</style>
<small>巧克力、玫瑰花、葡萄酒、小礼物……都是传情达意的好选择。而情人节与情人共度晚餐更是重头戏，平时不好意思表白的话，都可以在这一刻告诉对方。</small>
<ul>
<li>
<h3 onclick="cc(0);" onmouseover="v(this, 0);" onmouseout="t(this, 0);"><img src="http://lab.dianping.com/google_maplet/1-lv.png" /><a href="http://www.dianping.com/shop/2338573" target="_blank">麻辣风暴</a></h3>
<p>浦东南路1085号4楼 021-58883667</p>
</li>
<li>
<h3 onclick="cc(1);" onmouseover="v(this, 1);" onmouseout="t(this, 1);"><img src="http://lab.dianping.com/google_maplet/2-lv.png" /><a href="http://www.dianping.com/shop/502520" target="_blank">巴黎春天大酒店西餐厅</a></h3>
<p>定西路1555号2楼 021-62408888-8211</p>
</li>
<li>
<h3 onclick="cc(2);" onmouseover="v(this, 2);" onmouseout="t(this, 2);"><img src="http://lab.dianping.com/google_maplet/3-lv.png" /><a href="http://www.dianping.com/shop/2396689" target="_blank">雍庭</a></h3>
<p>遵义路227号5楼 021-61281111－5757</p>
</li>
<li>
<h3 onclick="cc(3);" onmouseover="v(this, 3);" onmouseout="t(this, 3);"><img src="http://lab.dianping.com/google_maplet/4-lv.png" /><a href="http://www.dianping.com/shop/2396206" target="_blank">英国吧</a></h3>
<p>北苏州路20号（外滩） 021-63246260-2487</p>
</li>
<li>
<h3 onclick="cc(4);" onmouseover="v(this, 4);" onmouseout="t(this, 4);"><img src="http://lab.dianping.com/google_maplet/5-lv.png" /><a href="http://www.dianping.com/shop/502240" target="_blank">苏武牧羊</a></h3>
<p>斜土路2422号 021-64689937</p>
</li>
<li>
<h3 onclick="cc(5);" onmouseover="v(this, 5);" onmouseout="t(this, 5);"><img src="http://lab.dianping.com/google_maplet/6-lv.png" /><a href="http://www.dianping.com/shop/1923832" target="_blank">Yeeha姚餐厅</a></h3>
<p>华山路2号1楼 021-62489988</p>
</li>
<li>
<h3 onclick="cc(6);" onmouseover="v(this, 6);" onmouseout="t(this, 6);"><img src="http://lab.dianping.com/google_maplet/7-lv.png" /><a href="http://www.dianping.com/shop/2199823" target="_blank">汉泰东南亚风味餐厅</a></h3>
<p>共和新路1998号11栋4楼 021-33871718</p>
</li>
<li>
<h3 onclick="cc(7);" onmouseover="v(this, 7);" onmouseout="t(this, 7);"><img src="http://lab.dianping.com/google_maplet/8-lv.png" /><a href="http://www.dianping.com/shop/2199688" target="_blank">华樽上海风情菜</a></h3>
<p>静安区华山路303弄口 021-62496460</p>
</li>
<li>
<h3 onclick="cc(8);" onmouseover="v(this, 8);" onmouseout="t(this, 8);"><img src="http://lab.dianping.com/google_maplet/9-lv.png" /><a href="http://www.dianping.com/shop/2326435" target="_blank">太官府</a></h3>
<p>长宁区古羊路318号(近张虹路) 021-62198859</p>
</li>
<li>
<h3 onclick="cc(9);" onmouseover="v(this, 9);" onmouseout="t(this, 9);"><img src="http://lab.dianping.com/google_maplet/10-lv.png" /><a href="http://www.dianping.com/shop/2374846" target="_blank">789新概念火锅料理</a></h3>
<p>西藏中路180号4楼 021-63508182</p>
</li>
</ul>
<script>
var map = new GMap2();
map.setCenter(new GLatLng(31.23100453441483, 121.47411346435547), 12);
var ms = new Array();
function v(o, n){o.style.background="#b5edbc";ms[n].setImage("http://lab.dianping.com/google_maplet/stars.png");}
function t(o, n){o.style.background="#e1ecfe";ms[n].setImage("http://lab.dianping.com/google_maplet/" + (n+1) + ".png");}
function cc(n)
{
map.setZoom(15);
var sd = p[n];
ms[n].openInfoWindowHtml(p[n].Msg);
}
function m(d)
{
var rm = new Array();
for (var i = 0; i < d.length; ++i)
{
var sd = d[i];
var ico = new GIcon(G_DEFAULT_ICON);
ico.iconSize = new GSize(32, 32);
ico.image = "http://lab.dianping.com/google_maplet/" + (i + 1) + ".png";
var r = new GMarker(new GLatLng(sd.Lat, sd.Lng), { icon : ico });
r.bindInfoWindow(sd.Msg);
rm.push(r);
}
return rm;
}
var p = [{Lat : 31.2307064, Lng : 121.5110421 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>麻辣风暴</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日全天，点餐前出示大众点评网会员卡，每桌即可<br /><strong>免费获得密制饮料“爱情海”一杯。</strong><br />此优惠可与店内其他优惠同享。<br />麻辣风暴愿您和您的他（她）永浴爱情海！</p>"},{Lat : 31.2181854248047, Lng : 121.421432495117 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>巴黎春天大酒店西餐厅</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日18：00-22：00间，巴黎春天大酒店西餐厅特为08年情人节推出两款套餐：<br />1、<strong>双人情侣海鲜自助晚宴，</strong>套餐价：RMB488元/2人<br />2、<strong>双人豪华海鲜自助晚宴（含豪华客房一晚），</strong> 套餐价：RMB888元/2人</p>"},{Lat : 31.21245954, Lng : 121.40307932 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>雍庭</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日全天，雍庭酒店特为08年情人节推出三款套餐：<br />1、价值788元的<strong>浪漫情侣套餐（另赠玫瑰、香槟）</strong><br />2、价值1588元的<strong>豪华情侣套餐（另赠玫瑰、香槟、豪华套房一晚</strong>）<br />3、价值1988元的<strong>豪华时尚情侣套餐（另赠玫瑰、香槟、费列罗巧克力、豪华时尚套房一晚）</strong></p>"},{Lat : 31.24619, Lng : 121.48545 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>英国吧</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日18：00-24：00间，消费椰岛冰露即<strong>可免费获得甜蜜礼物</strong>一份！情人节当天还将推出特色鸡尾酒……<br />外滩，上演了近一个世纪的浪漫，外滩边上的上海大厦英国吧带给您一份无法复制的怀旧气息，点滴精细，给您意想不到的爱情期待……</p>"},{Lat : 31.1915397644043, Lng : 121.447784423828 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>苏武牧羊</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日全天，至苏武牧羊以上门店消费，每桌即可<strong>免费获得相思飞饼</strong>一份。<br />海上生明月，天涯共此时，情人怨遥夜，竟夕起相思。苏武牧羊在此祝您情人节快乐！ </p>"},{Lat : 31.2234210968018, Lng : 121.444267272949 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>Yeeha姚餐厅</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日全天，Yeeha姚餐厅特为08年情人节推出<strong>价值336元的浪漫情侣套餐</strong>！<br />Yeeha姚餐厅愿您在此度过别有风味的情人节！</p>"},{Lat : 31.2739018409932, Lng : 121.454844474792 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>汉泰东南亚风味餐厅</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日全天，消费价值298元的燕窝情侣套餐，即可<strong>免费获得玫瑰花、红酒一份</strong>！<br />让汉泰为您打造一个不一样的情人节，为您们留下一段美好的回忆！</p>"},{Lat : 31.2187347412109, Lng : 121.446014404297 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>华樽上海风情菜</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>静安区华山路303弄口 021-624964602008年2月14日18：00-24：00间，消费价值388元的精选情侣套餐，即可免费获得精美华樽巧克力派一份，女士还可<strong>另获神秘礼物一份！</strong><br />在浪漫的玫红牡丹花中，妖艳摇曳的烛光下，尽享华樽上海风情美味…… </p>"},{Lat : 31.19352248, Lng : 121.39513412 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>太官府</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>长宁区古羊路318号(近张虹路) 021-62198859 2008年2月14日全天，太官府特为08年情人节推出<strong>价值576元的浪漫情侣套餐</strong>！<br />太官府愿有情人在天皆作比翼鸟,在地皆为连理枝，祝情人节快乐！</p>"},{Lat : 31.18533916, Lng : 121.43879076 , Msg : "<h3 style='margin:0;padding:0 0 15px 0;font-szie:13px;'>789新概念火锅料理</h3><p style='font-size:12px;margin:0;padding:0 0 15px 0;'>2008年2月14日17：50-22：00间，至789新概念火锅料理消费，即有机会<strong>获得惊喜大礼！</strong><br />789新概念火锅料理愿有情人终成眷属！ </p>"}];
ms = m(p);
for (var i = 0; i < ms.length; ++i)
{
map.addOverlay(ms[i]);
}
</script>
大家也拓展一下思路，看看有什么比较好的应用，合适放到mapplet上，可以一起做做看。
