概要

Mapserverの地図をgoogleマップで表示してみた。

写真

成果物

サンプルコード

var koko = document.getElementById("map");
var maps = [];
for (var type in google.maps.MapTypeId) 
{
    maps.push(google.maps.MapTypeId[type]);
}
maps.push("mvr");
var map = new google.maps.Map(koko, {
    center: new google.maps.LatLng(38.0, 140.0),
    zoom: 11,
    mapTypeId: "mvr",
    mapTypeControlOptions: {
        mapTypeIds: maps
    }
});
map.mapTypes.set("mvr", new google.maps.ImageMapType({
    getTileUrl: function(coord, zoom) {
        var z = Math.pow(2, zoom);
        var llp = new google.maps.Point((coord.x * 256 + 128) / z, (coord.y * 256 + 128) / z);
        var ll = map.getProjection().fromPointToLatLng(llp);
        var lng = ll.lng();
        var lat = ll.lat();
        return "http://yumeblog.dip.jp/yb2g0.php?zoom=" + zoom + "&long=" + lng + "&lat=" + lat;
    },
    tileSize: new google.maps.Size(256, 256),
    name: "mvr",
    maxZoom: 18,
    isPng: true
}));