Place map with transparent bg over another one
I'm looking to place one map over another so that I can make one "satellite view" map dark without affecting the color of roads and labels. I want it to look like this: http://pixfx.at/#Map
So I took some of their code and made it look like this:
<style type="text/css">
#map {
height:543px !important;
background-image:url(../images/background_gradient_transparent.png);
background-repeat:repeat-x;
border-top:1px solid #cccccc;
border-bottom:1px solid #666666;
margin:5px 0px 5px 0px;
overflow:hidden !important;
}
#map_canvas {
height:543px !important;
background-color:transparent !important;
overflow:hidden !important;
}
#map_canvas .terms-of-use-link {
display:none;
}
</style>
<script type="text/javascript">
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(47.254072, 11.445657), 13);
map.setMapType(G_HYBRID_MAP);
/*
map.removeMapType(G_NORMAL_MAP);
map.removeMapType(G_HYBRID_MAP);
map.removeMapType(G_SATELLITE_MAP);
map.removeMapType(G_PHYSICAL_MAP);
*/
//map.getDragObject().setDraggableCursor("move");
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.enableDragging();
}
function loadScript() {
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
jQuery('#map_canvas > div > div > div > div').each( function () {
if(jQuery(this).css('zIndex') == '0')
{
jQuery(this).find('img').each( function() {
jQuery(this).css({ opacity: '0.25' });
});
}
});
jQuery('#map_canvas > .gmnoprint').css({ display: 'none' });
}
window.onload = loadScript;
</script>
</head>
<body>
<div id="map">
<div id="map_canvas" style="width:100%; height:100%;"></div>
</div>开发者_如何学Python
Though the problem is that the map doesn't display.
The code you supplied is invalid.
map.enableDragging();
} //<-- this bracket is unmatched
function loadScript() {
Also, this line : var map = new GMap2(document.getElementById("map_canvas"));
use an unknown item. Wrong API usage/lacking a link?
As for your CSS, using custom pictures for both canvas, I see that #map_canvas is over #map, correctly.
Your problem lies within your javascript : you are not using the google map API correctly. I somewhat changed your code but GMap2 is still not defined...
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(47.254072, 11.445657), 13);
map.setMapType(G_HYBRID_MAP);
map.enableDoubleClickZoom();
map.enableContinuousZoom();
map.enableScrollWheelZoom();
map.enableDragging();
jQuery('#map_canvas > div > div > div > div').each( function () {
if(jQuery(this).css('zIndex') == '0')
{
jQuery(this).find('img').each( function() {
jQuery(this).css({ opacity: '0.25' });
});
}
});
jQuery('#map_canvas > .gmnoprint').css({ display: 'none' });
});
</script>
Since Google Map API v2 is deprecated you should switch to version 3.
Also, you need to Sign up for a Google Maps API key. Otherwise Google blocks you.
Go here and follow the instructions. :)
加载中,请稍侯......
精彩评论