google maps api - unwanted transparent borders

google maps api - unwanted transparent borders - javascript

Followed by this example: https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple
and made a custom one
my html(almost same, main diff. are var feartureOpts and var mapOtions):
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(52.330394, -23.661259);
var MY_MAPTYPE_ID = 'custom_style';
function initialize() {
var featureOpts = [
{
stylers: [
{ gamma: 1.56 },
{ lightness: 25 },
{ saturation: -100 }
]
}
];
var mapOptions = {
zoom: 17,
disableDefaultUI: true,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var styledMapOptions = {
name: 'Custom Style'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<div id="map-canvas" style="witdh: 100%; height: 350px;"></div>
results:
QUESTION: how to remove those nasty semi-transparent square borders?

Please refer the below link.
http://jsfiddle.net/x5xXc/
<div id="map-canvas" style="witdh: 400px; height: 350px;"></div>
var featureOpts = [
{
stylers: [
{ gamma: 1.56 },
{ lightness: 25 },
{ saturation: -100 }
]
}
];

Related

Googlemaps API - Greyscale

I have the following code setup to apply a map for a variety of areas
var locations = [
['Liver Office - Liverpool Office', 53.40529, -2.988801, 1],
['Lond office - London Office', 51.515026, -0.086811, 2],
];
function plotMap(loc) {
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng((locations[loc][1]), (locations[loc][2])),
stylers: [
{ saturation: -100 } // <-- THIS
]
};
var map = new google.maps.Map(document.getElementById('map'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
},
icon: 'marketICO.png',
title: (locations[loc][0])
});
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infowindow.setContent(locations[loc][0]);
infowindow.open(map, marker);
}
})(marker, loc));
}
$('.livLink').click(function(){
plotMap(0);
});
$('.lonLink').click(function(){
plotMap(1);
});
plotMap(0);
Has anyone managed to get their map greyscale - i've had a few attempts - including above - but no luck so far..

You are not applying the styles correctly.
var styles = [{
"stylers": [{
"saturation": -100
}]
}];
var mapOptions = {
zoom: 17,
styles: styles,
// your other options here
};
Or directly in the map options:
var mapOptions = {
zoom: 17,
styles: [{
"stylers": [{
"saturation": -100
}]
}],
// your other options here
};
Check this nice tool: http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html

Addressing a google map to change setZoom by clicking on an external link

I've spent several hours trying to change the zoom level of a google map, using an onClick javascript function. I think my var map is inside the initialize function of the map, that's why it doesn't work, but I'm not sure. Thank you for your precious help.
Here we go:
1) My initialize function (with galeries corresponding to the data retrieved for the markers)
function initialize() {
var styles = [
{
stylers: [
{ hue: "#486FD5" },
{ saturation: 10 },
{ lightness: 20 },
{ gamma: 1.1 }
]
},{
featureType: "road",
elementType: "geometry",
stylers: [
{ lightness: 40 },
{ visibility: "simplified" }
]
},{
featureType: "road",
elementType: "labels",
stylers: [
{ visibility: "off" }
]
}
];
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(46.8,1.7),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: false,
styles: styles
}
var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
setMarkers(map, galeries);
}
function setMarkers(map, locations) {
var image = '/wordpress/wp-content/uploads/logo-25.png';
for (var i = 0; i < locations.length; i++) {
var galeries = locations[i];
var myLatLng = new google.maps.LatLng(galeries[1], galeries[2]);
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
(function(i) {
google.maps.event.addListener(marker, "click", function() {
var galeries = locations[i];
infoWindow.close();
infoWindow.setContent(
"<div id='boxcontent'><a href='"+galeries[3]+"'><strong style='color:black'>"+ galeries[0] +"</strong></a><br />"+ galeries[4] +"</div>"
);
infoWindow.open(map, this);
});
})(i);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
2) My function called with onClick (all comments corresponding to KO solutions):
function zoom() {
//map_canvas.setCenter(marker.getPosition());
//map.setZoom(map.getZoom() + 1);
//map.setZoom('3');
//$('#map_canvas').gmap({'zoom':2});
//$('#map_canvas').setZoom(3);
//google.maps.map.setZoom(2);
//var carte = google.maps.Map(document.getElementById('map-canvas'));
//carte.setZoom(2);
//this.map.setZoom(2);
}
3) Result : nothing happens, and on the console I get :
Uncaught TypeError: Cannot read property 'setZoom' of undefined

If you make your map variable global, you can access it in HTML click event handlers.
function zoom() {
map.setZoom(map.getZoom() + 1);
}
var map; // make global map variable
function initialize() {
...
// initialize the global variable, remove the "var" keyword here
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
setMarkers(map, galeries);
}
working fiddle
working code snippet:
function zoom() {
map.setZoom(map.getZoom() + 1);
}
var map;
function initialize() {
var styles = [{
stylers: [{
hue: "#486FD5"
}, {
saturation: 10
}, {
lightness: 20
}, {
gamma: 1.1
}]
}, {
featureType: "road",
elementType: "geometry",
stylers: [{
lightness: 40
}, {
visibility: "simplified"
}]
}, {
featureType: "road",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
var mapOptions = {
zoom: 6,
center: new google.maps.LatLng(46.8, 1.7),
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: false,
scrollwheel: false,
styles: styles
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var galeries = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 151.259052, 5],
['Cronulla Beach', -34.028249, 151.157507, 3],
['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
['Maroubra Beach', -33.950198, 151.259302, 1]
];
setMarkers(map, galeries);
}
function setMarkers(map, locations) {
var bounds = new google.maps.LatLngBounds();
var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
for (var i = 0; i < locations.length; i++) {
var galeries = locations[i];
var myLatLng = new google.maps.LatLng(galeries[1], galeries[2]);
bounds.extend(myLatLng);
var infoWindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
(function (i) {
google.maps.event.addListener(marker, "click", function () {
var galeries = locations[i];
infoWindow.close();
infoWindow.setContent(
"<div id='boxcontent'><a href='" + galeries[3] + "'><strong style='color:black'>" + galeries[0] + "</strong></a><br />" + galeries[4] + "</div>");
infoWindow.open(map, this);
});
})(i);
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map_canvas {
height: 500px;
width: 500px;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas" style="width:750px; height:450px; border: 2px solid #3872ac;"></div>
<input type="button" value="zoom" onclick="zoom()" />

Two styled Google maps on single page

I'd appreciate some help setting up two Google maps (API 3) on a single page. They've got some shared styles. I can get a single one running, but not two together.
http://theredfrog.com/new/temp3.html - one map (ok)
http://theredfrog.com/new/temp4.html - two maps (broken)
Here's the script...
<script type="text/javascript">
function initialize() {
var styles = [
....
];
var hulloptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.7413176, -0.3353987),
zoom: 15,
mapTypeId: 'StyledHull'
};
var leedsoptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.796177,-1.541862),
zoom: 15,
mapTypeId: 'StyledLeeds'
};
maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
var rfdMarkerHull = new google.maps.Marker({
position: HullLatLng,
map: maphull,
icon: image
});
var rfdMarkerLeeds = new google.maps.Marker({
position: LeedsLatLng,
map: leedshull,
icon: image
});
var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

These two lines don't look right:
var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
Don't you get an error in the JavaScript console on those?
I think you meant:
var styledMapTypeHull = new google.maps.StyledMapType( styles, {
name: 'RFD Hull'
});
var styledMapTypeLeeds = new google.maps.StyledMapType( styles, {
name: 'RFD Leeds'
});
(also reformatted slightly for shorter lines)
Here's some more information and a working example.
And now that I try your second map in with the Developer Tools open in Chrome, I see there are other errors before it even gets that far.
First a warning:
Warning: you have included the Google Maps API multiple times
on this page. This may cause unexpected errors.
Then lazyload is undefined here in plugins.js:
$(".lazy").lazyload({
effect: "fadeIn",
effectspeed: 600,
failure_limit: 10
});
And then a mysterious-looking error inside some Maps API compressed code, but if you look at the call stack, you'll see your initialize function in the stack, and if you click on that it goes to this line:
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
Paste this into the JavaScript console and you'll see what's wrong:
document.getElementById("map-leeds")
And more errors after that, before even getting to the problem I saw while looking at your code.
So you have some debugging to do. Are you familiar with the Developer Tools in Chrome or another browser? If not, now it is time! Here is a great introduction to the Chrome DevTools.

Your problems are (you need to run through your code with a debugger):
typos (map: mapleeds, not map: leedshull,
ordering, you can't use variables before you initialize them
these are not valid: google.maps.StyledMapTypeHull, google.maps.StyledMapTypeLeeds (maybe a search and replace gone wrong. Should be google.maps.StyledMapType
<script type="text/javascript">
var maphull = null;
var mapleeds = null;
function initialize() {
var styles = [
{
stylers: [
{ saturation: -100 }
]
},{
featureType: 'water',
elementType: 'all',
stylers: [
{ lightness: -74 },
{ visibility: 'on' }
]
},{
featureType: 'landscape',
elementType: 'geometry',
stylers: [
{ lightness: -26 },
{ visibility: 'simplified' }
]
},{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ hue: '#efefef' },
{ lightness: 83 },
{ visibility: 'simplified' }
]
},{
featureType: 'poi',
elementType: 'all',
stylers: [
{ hue: '#999999' },
{ saturation: -100 },
{ lightness: -23 },
{ visibility: 'on' }
]
},{
featureType: 'road',
elementType: 'labels',
stylers: [
{ saturation: -100 },
{ visibility: 'on' }
]
}
];
var hulloptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.7413176, -0.3353987),
zoom: 15,
mapTypeId: 'StyledHull'
};
var leedsoptions = {
mapTypeControlOptions: {
mapTypeIds: [ 'Styled']
},
center: new google.maps.LatLng(53.796177,-1.541862),
zoom: 15,
mapTypeId: 'StyledLeeds'
};
var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
var styledMapTypeHull = new google.maps.StyledMapType(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapType(styles, { name: 'RFD Leeds' });
maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
var rfdMarkerHull = new google.maps.Marker({
position: HullLatLng,
map: maphull,
icon: image
});
var rfdMarkerLeeds = new google.maps.Marker({
position: LeedsLatLng,
map: mapleeds,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

How to toggle a layer on/off using Google Maps API v3 and Fusion Tables?

I am trying to make a map with multiple fusion table layers. Each fusion table layer will show the number of cartel-related homicides in a particular year (including the sum of all years). Since each layer has the same geometry, I need to let the user view one layer at a time. Is there a way to toggle each layer on/off using a radio button? I've searched for tutorials or examples for a few hours and have come up empty, so I'm hoping someone here can help.
Here is a link to a copy of the map: https://mywebspace.wisc.edu/csterling/web/cartel%20map/index%20-%20practice.html
Here is the code (sorry about the formatting)
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script>
<link rel='stylesheet' href='stylesheet.css' />
<script type="text/javascript" src="script.js"></script>
<script type='text/javascript'>
window.onload = function () {
var oceanStyle = [
{
featureType: "ocean",
stylers: [
{ saturation: -100 }
]
},
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off"}
]
}
];
var oceanMapType = new google.maps.StyledMapType(oceanStyle,
{name: "Grayscale"});
var myLatlng = new google.maps.LatLng(0,0);
var mapOptions = {
center: new google.maps.LatLng(24,-103),
zoom: 5,
//mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
},
panControl: false,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
var map = new google.maps.Map(document.getElementById("mymap"), mapOptions);
map.mapTypes.set('Grayscale',oceanMapType);
map.setMapTypeId('Grayscale');
var layer1 = new google.maps.FusionTablesLayer({
query:{
select: 'unique_id',
from: '3943497'
},
map: map
});
/*
var layer2 = new google.maps.FusionTablesLayer({
query:{
select: 'unique_id',
from: '3962564'
},
map: map
}); */
}
</script>
</head>
<body>
<div id='mymap'></div>
#
EDIT
#
Ok, I got it! Here's my code in case others are having the same question:
<html>
<head>
<!-- <script src='http://maps.google.com/maps/api/js?sensor=false' type='text/javascript'></script> -->
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDRngi4TwTlx3r9zRXxIGzbSAq6OcEpxjA&sensor=false"></script>
<link rel='stylesheet' href='stylesheet.css' />
var map;
//var layArray = [];
var shownLayer;
var layer_sum;
var layer_2007;
var layer_2008;
var layer_2009;
var layer_2010;
function toggleLayer(this_layer){
shownLayer.setMap(null);
this_layer.setMap(map);
shownLayer = this_layer;
/*if ( this_layer.getMap() ) {
this_layer.setMap(null);
}else{
this_layer.setMap(map);
}*/
}
window.onload = function () {
var oceanStyle = [
{
featureType: "ocean",
stylers: [
{ saturation: -100 }
]
},
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off"}
]
}
];
var oceanMapType = new google.maps.StyledMapType(oceanStyle,
{name: "Grayscale"});
var myLatlng = new google.maps.LatLng(0,0);
var mapOptions = {
center: new google.maps.LatLng(24,-103),
zoom: 6,
//mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
},
panControl: true,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("mymap"), mapOptions);
map.mapTypes.set('Grayscale',oceanMapType);
map.setMapTypeId('Grayscale');
layer_sum = new google.maps.FusionTablesLayer({
query:{
select: 'unique_id',
from: '3943497'
},
});
layer_2007 = new google.maps.FusionTablesLayer({
query:{
select: 'unique_id',
from: '3962564'
},
});
layer_2008 = new google.maps.FusionTablesLayer({
query:{
select: '2008',
from: '3962469'
},
});
layer_2009 = new google.maps.FusionTablesLayer({
query: {
select: '2009',
from: '3964318'
},
});
layer_2010 = new google.maps.FusionTablesLayer({
query: {
select: '2010',
from: '3964517'
},
});
layer_sum.setMap(map);
shownLayer = layer_sum;
}
</script>
</head>
<body>
<div id='mymap'></div>
<div id='map-optionbar-r'>
Sum of Homicides<input name="layers" type="radio" value="layer_sum" onClick="toggleLayer(layer_sum);" checked><br />
Homicides - 2007<input name="layers" type="radio" value="layer_2007" onClick="toggleLayer(layer_2007);"><br />
Homicides - 2008<input name="layers" type="radio" value="layer_2008" onClick="toggleLayer(layer_2008);"><br />
Homicides - 2009<input name="layers" type="radio" value="layer_2009" onClick="toggleLayer(layer_2009);"><br />
Homicides - 2010<input name="layers" type="radio" value="layer_2010" onClick="toggleLayer(layer_2010);"><br />
</div>

toggleLayer(layer1);
// make sure your map is a global
function toggleLayer(this_layer)
{
if( this_layer.getMap() ){
this_layer.setMap(null);
}else{
this_layer.setMap(map);
}
}
</head>
<body>
<br />
Layer 1<input name="layers" type="radio" value="layer1" onClick="toggleLayer(layer1);"><br />
Layer 2<input name="layers" type="radio" value="layer2" onClick="toggleLayer(layer2);"><br />
UPDATED
<script type='text/javascript'>
var map, layer1, layer2;
google.load("maps", "3", {other_params:"sensor=false"});
window.onload = function () {
var oceanStyle = [
{
featureType: "ocean",
stylers: [
{ saturation: -100 }
]
},
{
featureType: "all",
elementType: "labels",
stylers: [
{ visibility: "off"}
]
}
];
var oceanMapType = new google.maps.StyledMapType(oceanStyle,
{name: "Grayscale"});
var myLatlng = new google.maps.LatLng(0,0);
var mapOptions = {
center: new google.maps.LatLng(24,-103),
zoom: 5,
//mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: true,
mapTypeControlOptions: {
position: google.maps.ControlPosition.RIGHT_TOP,
mapTypeIds: [google.maps.MapTypeId.HYBRID, 'Grayscale']
},
panControl: false,
streetViewControl: false,
zoomControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
}
};
map = new google.maps.Map(document.getElementById("mymap"), mapOptions);
map.mapTypes.set('Grayscale',oceanMapType);
map.setMapTypeId('Grayscale');
layer1 = new google.maps.FusionTablesLayer({
query:{
select: 'unique_id',
from: '3943497'
},
//map: map
});
layer2 = new google.maps.FusionTablesLayer({
query:{
select: 'unique_id',
from: '3962564'
}
//map: map
});
// may need to remove this line
//layer1.setMap(map);
}
function old_toggleLayer(this_layer){
if ( this_layer.getMap() ) {
this_layer.setMap(null);
}else{
this_layer.setMap(map);
}
}
function toggleLayer(this_layer){
layer1.setMap(null);
layer2.setMap(null);
this_layer.setMap(map);
}
</script>

See Turning weather layer on/off combined with other selections ; I did this (with super help from Sean) for the weather/cloud layers. I suppose you can switch on/off all other layers the same way because I have the FT-layer active also. Just rip my code and tweak it.
Cheers! Frank

KML Layer Will Not Toggle Properly, Google Maps

I'm in the process of creating an interactive campus map using the Google Maps API and KML. I have a map with a Ground Overlay and a layer of KML markers. I am trying to figure out how to get the KML layer to toggle. I currently have it set to toggle via a checkbox, but it only toggles off the first time you click the checkbox. Any subsequent clicks do nothing. The KML layer just disappears. I have a feeling that this is probably an easy javascript fix, but I'm new to javascript and I can't figure it out. Anyone know what I'm doing wrong? Thanks in advance for your help.
Here's all my code:
<script type="text/javascript">
function initialize() {
var map;
var omaha = new google.maps.LatLng(41.265437, -95.947405);
var MY_MAPTYPE_ID = 'blue';
var stylez = [
{
featureType: "all",
stylers: [
{ hue: "#004A96" },
]
},
{
featureType: "all",
elementType: "labels",
stylers: [
{ hue: "#000000" },
]
},
{
featureType: "road",
elementType: "local",
stylers: [
{ hue: "#24356B" },
{ saturation: 55 },
{ lightness: 20 }
]
},
{
featureType: "poi.school",
elementType: "geometry",
stylers: [
{ hue: "#24356B" },
{ saturation: 55 },
{ lightness: 20 }
]
}
];
var imageBounds = new google.maps.LatLngBounds(
new google.maps.LatLng(41.2599,-95.9601),
new google.maps.LatLng(41.2718,-95.9367));
var mapOptions = {
zoom: 15,
center: omaha,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var styledMapOptions = {
name: "Blue"
};
var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
var oldmap = new google.maps.GroundOverlay(
"http://www.mcography.com/beta/CampusMap.png",
imageBounds);
oldmap.setMap(map);
var kmlLayer01URL = 'http://www.mcography.com/beta/CUADA.kml';
var kmlOptions = {
preserveViewport: 1
};
kmlLayer01 = new google.maps.KmlLayer(kmlLayer01URL, kmlOptions);
kmlLayer01.setMap(map);
// initially show KML Layer 01
document.getElementById('show_hide_KML_Layer_01').checked = true;
}
function toggleKMLLayer01() {
if (!document.getElementById('show_hide_KML_Layer_01').checked)
kmlLayer01.setMap(null);
else
kmlLayer01.setMap(map); }
</script>
</head>
<body onload="initialize()">
<p><input type="checkbox" id="show_hide_KML_Layer_01" onclick="toggleKMLLayer01();" />ADA Layer</p>
<div id="map_canvas"></div>
</body>

Without the top part of your code, I can't be totally sure, but my hunch is that you need to make the map variable global, otherwise toggle won't setMap to map. I wrote the following, which works:
var map;
function initialize() {
var mapOptions = { center: new google.maps.LatLng(0.0, 0.0), zoom: 2,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var kmlLayer01URL = 'http://www.mcography.com/beta/CUADA.kml';
var kmlOptions = {
preserveViewport: 1
};
kmlLayer01 = new google.maps.KmlLayer(kmlLayer01URL, kmlOptions);
kmlLayer01.setMap(map);
// initially show KML Layer 01
document.getElementById('show_hide_KML_Layer_01').checked = true;
}
function toggleKMLLayer01() {
if (!document.getElementById('show_hide_KML_Layer_01').checked)
kmlLayer01.setMap(null);
else
kmlLayer01.setMap(map);
}

Develop Reference

JavaScript is the programming language of the Web.

google maps api - unwanted transparent borders - javascript

Please refer the below link. http://jsfiddle.net/x5xXc/ <div id="map-canvas" style="witdh: 400px; height: 350px;"></div> var featureOpts = [ { stylers: [ { gamma: 1.56 }, { lightness: 25 }, { saturation: -100 } ] } ];

Related

Googlemaps API - Greyscale

Addressing a google map to change setZoom by clicking on an external link

Two styled Google maps on single page

How to toggle a layer on/off using Google Maps API v3 and Fusion Tables?

KML Layer Will Not Toggle Properly, Google Maps

Categories

Resources