ソースは俺的老婆

南方熊楠を目指していたのにアニリールセルカンになりつつあるペシミストでコミュニストでトーストマスターのTaとその老婆が上海のどこかで織り成す日常を描いたハートフルコメディ。

The way to create "my maps" in China

No one can use google in P.R. China due to Great fxxx wall as you know.
There're the way to make my-maps-like somewhat using local online mapping services. Unfortunately, no universal maps is available here.

2 options

serviceaccountsave map on their server
Gaode mapsrequiredyes
Baidu mapsnot requiredno

Baidu maps

创建地图-百度地图生成器
You will get html source like below.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="百度地&#22270;,百度地&#22270;API,百度地&#22270;自定&#20041;工具,百度地&#22270;&#35265;即所得工具" />
<meta name="description" content="百度地&#22270;API自定&#20041;&#22270;&#24110;助用&#25143;在可&#35270;化操作下生成百度地&#22270;" />
<title>百度地&#22270;API自定&#20041;&#22270;</title>
<!--引用百度地&#22270;API-->
<style type="text/css">
    html,body{margin:0;padding:0;}
    .iw_poi_title {color:#CC5522;font-size:14px;font-weight:bold;overflow:hidden;padding-right:13px;white-space:nowrap}
    .iw_poi_content {font:12px arial,sans-serif;overflow:visible;padding-top:4px;white-space:-moz-pre-wrap;word-wrap:break-word}
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
</head>

<body>
  <!--百度地&#22270;容器-->
  <div style="width:640px;height:480px;border:#ccc solid 1px;" id="dituContent"></div>
</body>
<script type="text/javascript">
    //&#21019;建和初始化地&#22270;函数:
    function initMap(){
        createMap();//&#21019;建地&#22270;
        setMapEvent();//&#35774;置地&#22270;事件
        addMapControl();//向地&#22270;添加控件
        addMarker();//向地&#22270;中添加marker
    }
    
    //&#21019;建地&#22270;函数:
    function createMap(){
        var map = new BMap.Map("dituContent");//在百度地&#22270;容器中&#21019;建一个地&#22270;
        var point = new BMap.Point(121.411021,31.218984);//定&#20041;一个中心点坐&#26631;
        map.centerAndZoom(point,18);//&#35774;定地&#22270;的中心点和坐&#26631;并将地&#22270;&#26174;示在地&#22270;容器中
        window.map = map;//将map&#21464;量存&#20648;在全局
    }
    
    //地&#22270;事件&#35774;置函数:
    function setMapEvent(){
        map.enableDragging();//&#21551;用地&#22270;&#25302;&#25341;事件,默&#35748;&#21551;用(可不写)
        map.enableScrollWheelZoom();//&#21551;用地&#22270;&#28378;&#36718;放大&#32553;小
        map.enableDoubleClickZoom();//&#21551;用鼠&#26631;双&#20987;放大,默&#35748;&#21551;用(可不写)
        map.enableKeyboard();//&#21551;用&#38190;&#30424;上下左右&#38190;移&#21160;地&#22270;
    }
    
    //地&#22270;控件添加函数:
    function addMapControl(){
        //向地&#22270;中添加&#32553;放控件
	var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE});
	map.addControl(ctrl_nav);
        //向地&#22270;中添加&#32553;略&#22270;控件
	var ctrl_ove = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:1});
	map.addControl(ctrl_ove);
        //向地&#22270;中添加比例尺控件
	var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
	map.addControl(ctrl_sca);
    }
    
    //&#26631;注点数&#32452;
    var markerArr = [{title:"SH&nbsp;Takashimaya",content:"Rich&nbsp;Japanese&nbsp;gather",point:"121.409619|31.203225",isOpen:0,icon:{w:23,h:25,l:46,t:21,x:9,lb:12}}
		 ,{title:"SH&nbsp;APITA&nbsp;(Archwalk)",content:"Upper-middle&nbsp;Japanese&nbsp;gather",point:"121.412449|31.219717",isOpen:1,icon:{w:23,h:25,l:69,t:21,x:9,lb:12}}
		 ];
    //&#21019;建marker
    function addMarker(){
        for(var i=0;i<markerArr.length;i++){
            var json = markerArr[i];
            var p0 = json.point.split("|")[0];
            var p1 = json.point.split("|")[1];
            var point = new BMap.Point(p0,p1);
			var iconImg = createIcon(json.icon);
            var marker = new BMap.Marker(point,{icon:iconImg});
			var iw = createInfoWindow(i);
			var label = new BMap.Label(json.title,{"offset":new BMap.Size(json.icon.lb-json.icon.x+10,-20)});
			marker.setLabel(label);
            map.addOverlay(marker);
            label.setStyle({
                        borderColor:"#808080",
                        color:"#333",
                        cursor:"pointer"
            });
			
			(function(){
				var index = i;
				var _iw = createInfoWindow(i);
				var _marker = marker;
				_marker.addEventListener("click",function(){
				    this.openInfoWindow(_iw);
			    });
			    _iw.addEventListener("open",function(){
				    _marker.getLabel().hide();
			    })
			    _iw.addEventListener("close",function(){
				    _marker.getLabel().show();
			    })
				label.addEventListener("click",function(){
				    _marker.openInfoWindow(_iw);
			    })
				if(!!json.isOpen){
					label.hide();
					_marker.openInfoWindow(_iw);
				}
			})()
        }
    }
    //&#21019;建InfoWindow
    function createInfoWindow(i){
        var json = markerArr[i];
        var iw = new BMap.InfoWindow("<b class='iw_poi_title' title='" + json.title + "'>" + json.title + "</b><div class='iw_poi_content'>"+json.content+"</div>");
        return iw;
    }
    //&#21019;建一个Icon
    function createIcon(json){
        var icon = new BMap.Icon("http://app.baidu.com/map/images/us_mk_icon.png", new BMap.Size(json.w,json.h),{imageOffset: new BMap.Size(-json.l,-json.t),infoWindowOffset:new BMap.Size(json.lb+5,1),offset:new BMap.Size(json.x,json.h)})
        return icon;
    }
    
    initMap();//&#21019;建和初始化地&#22270;
</script>
</html>

Also refer to 【百度地图API】如何快速创建带有标注的地图?――快速创建地图工具+如何标注商家 - 酸奶小妹 - 博客园

Comparison of online mapping services

namemy mapLanguageInternet accessdetailnote
google mapsyesmultiGreat fxx wall!Basically good, but google map and google earth have difference a few hundred meters from real address in PRC.Blocked from 2014 summer.
Baidu mapsyes (show above)Mandarine-onlyno problemgood at everywhere in Chinapotal site.
Tencent maps (Soso map before)noMandarine-onlyno problemgood at everywhere in ChinaIt was Soso map before TOB. Tencent also provides QQ and WeChat. I failed to create my QQ account.
Gaode mapsyes (show above)Mandarine-onlyno problemgood at everywhere in ChinaAlibaba group.
bing mapsyesmultino problempoor, especially maps of PRCThough I like Gates.
herenomultino problemvery good around the world"Create new account" function doesn't work.
OpenStreetMapnomultino problemnot badYour account will be shown on the map if you draw anything.
apple mapsI don't knowmultifor iOS onlyI don't knowI don't like Jobs.