开发者

Google Maps V3 KML Layer over ImageMapType

I have a pretty little custom map created through MapTiler and it was dead easy to get it to render with GMaps. The basics of the few lines of code needed are below.

I have a lovely little KML layer too which renders fine.

However.... for the life of me I can't get both layers to display together. As soon as the KML is instructed to render, the custom map layer disappears. Firebug even tells me that my custom tiles are not even requested! Ideally I need the KML layer over my custom map layer. It's going to show where a few UK landmarks are located.

At the back of my mind I'm thinking projection types and conflicts, but when both layers render correctly on the base map individually, I really am left in the dark.

Can anyone give me advice on KML layers over Custom Map 开发者_开发技巧Types in Google Maps V3?

Thank you

  var MyCustomMapType = new google.maps.ImageMapType({
 getTileUrl: function(tile, zoom) {
        return "/static/images/maps/uk/" + zoom+"/"+tile.x+"/"+ tile.y +".png";
 }, 
 tileSize: new google.maps.Size(256, 256),
  });

  function init(){

  var mapOpts = {
    zoom: 6,
    center: new google.maps.LatLng(53.94315470224928, -3.515625),
    mapTypeId: google.maps.MapTypeId.ROADMAP
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOpts);
map.overlayMapTypes.insertAt(0, MyCustomMapType);
var cathedrals = new google.maps.KmlLayer('http://pointing_at_my/kml/');

// as soon as this executes, ImageMapType layer disappears
cathedrals.setMap(map);
 }


Solved. Just don't be an idiot.

    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">

        var map, cathedrals;

        var ukOverlay = new google.maps.ImageMapType({

            getTileUrl: function(coord, zoom) {

                var ymax = 1 << zoom;
                var y = ymax - coord.y -1;
                return "/static/images/maps/uk/" + zoom+"/"+coord.x+"/"+y+".png";

            }, 
            tileSize: new google.maps.Size(256, 256),
            isPng: true

       });

function init(){

    var mapOpts = {
        zoom: 6,
        center: new google.maps.LatLng(54.40315470224928, -3.515625),
        mapTypeId: google.maps.MapTypeId.HYBRID ,
        disableDefaultUI: false,
        mapTypeControl: false,
        scrollwheel: false,
        navigationControl: false,
        mapTypeControl: false,
        scaleControl: false,
        draggable: false
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOpts);
    cathedrals = new google.maps.KmlLayer('http://cathedralcafes.co.uk/kml/', {preserveViewport: true});
    map.overlayMapTypes.insertAt(0, ukOverlay);     
    cathedrals.setMap(map);
}

    </script>
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜