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>
精彩评论