Hi there,
I'm a noob to the JavaScrip API's and have gotten this far by using this
excellent forum and the tutorials.
However, I have a little hiccup on my map when switching KML layers on and
off.
The first click of the button doesn't seem to register so you have to click
it again to toggle the layer (of which there are 3).
Not a massive problem but one that would annoy me (and so my users also I
think).
Test site is here: www.miketest.tk/partners.html and my JavaScript code is
below if you wouldn't mind taking a look please?
Many thanks in anticipation,
Mike
function HomeControl(controlDiv, map) {
// Set CSS styles for the DIV containing the control
// Setting padding to 5 px will offset the control
// from the edge of the map
controlDiv.style.padding = '5px';
// Set CSS for the control border Tilecare
var tileUI = document.createElement('DIV');
tileUI.style.backgroundColor = '#5588FF';
tileUI.style.borderStyle = 'solid';
tileUI.style.borderWidth = '1px';
tileUI.style.marginTop = '2px';
tileUI.style.cursor = 'pointer';
tileUI.style.textAlign = 'center';
tileUI.title = 'Click to toggle';
controlDiv.appendChild(tileUI);
// Set CSS for the control interior Tilecare
var tileText = document.createElement('DIV');
tileText.style.fontFamily = 'Arial,sans-serif';
tileText.style.fontSize = '12px';
tileText.style.color = 'white';
tileText.style.paddingLeft = '4px';
tileText.style.paddingRight = '4px';
tileText.innerHTML = 'Tilecare Stockists';
tileUI.appendChild(tileText);
// Set CSS for the control border Stonecare
var stoneUI = document.createElement('DIV');
stoneUI.style.backgroundColor = '#EE4499';
stoneUI.style.borderStyle = 'solid';
stoneUI.style.borderWidth = '1px';
stoneUI.style.marginTop = '2px';
stoneUI.style.cursor = 'pointer';
stoneUI.style.textAlign = 'center';
stoneUI.title = 'Click to toggle';
controlDiv.appendChild(stoneUI);
// Set CSS for the control interior Stonecare
var stoneText = document.createElement('DIV');
stoneText.style.fontFamily = 'Arial,sans-serif';
stoneText.style.fontSize = '12px';
stoneText.style.color = 'white';
stoneText.style.paddingLeft = '4px';
stoneText.style.paddingRight = '4px';
stoneText.innerHTML = 'Stonecare Stockists';
stoneUI.appendChild(stoneText);
// Set CSS for the control border Woodcare
var woodUI = document.createElement('DIV');
woodUI.style.backgroundColor = '#00EE33';
woodUI.style.borderStyle = 'solid';
woodUI.style.borderWidth = '1px';
woodUI.style.marginTop = '2px';
woodUI.style.cursor = 'pointer';
woodUI.style.textAlign = 'center';
woodUI.title = 'Click to toggle';
controlDiv.appendChild(woodUI);
// Set CSS for the control interior Woodcare
var woodText = document.createElement('DIV');
woodText.style.fontFamily = 'Arial,sans-serif';
woodText.style.fontSize = '12px';
woodText.style.color = 'white';
woodText.style.paddingLeft = '4px';
woodText.style.paddingRight = '4px';
woodText.innerHTML = 'Woodcare Stockists';
woodUI.appendChild(woodText);
// Setup the click event listeners:
google.maps.event.addDomListener(tileUI, 'click', function() {
toggle_tkml()
});
google.maps.event.addDomListener(stoneUI, 'click', function() {
toggle_skml()
});
google.maps.event.addDomListener(woodUI, 'click', function() {
toggle_wkml()
});
}
function toggle_tkml() {
if (show_kml == 1)
{
show_kml = 0;
tileLayer.setMap(null);
}
else
{
show_kml = 1;
tileLayer.setMap(map);
}
}
function toggle_skml() {
if (show_kml == 1)
{
show_kml = 0;
stoneLayer.setMap(null);
}
else
{
show_kml = 1;
stoneLayer.setMap(map);
}
}
function toggle_wkml() {
if (show_kml == 1)
{
show_kml = 0;
woodLayer.setMap(null);
}
else
{
show_kml = 1;
woodLayer.setMap(map);
}
}
function initialize() {
my_center = new google.maps.LatLng(53.431138,-7.922974);
var myOptions = {
zoom: 7,
center: my_center,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
tileLayer = new
google.maps.KmlLayer('http://www.miketest.tk/js/Tilecare.kml',
{preserveViewport:true});
tileLayer.setMap(map);
stoneLayer = new
google.maps.KmlLayer('http://www.miketest.tk/js/Stonecare.kml',
{preserveViewport:true});
stoneLayer.setMap(map);
woodLayer = new
google.maps.KmlLayer('http://www.miketest.tk/js/Woodcare.kml',
{preserveViewport:true});
woodLayer.setMap(map);
// You have to listen for the kml file to be loaded before you change the
preserveViewport setting
google.maps.event.addListenerOnce(tileLayer, "defaultviewport_changed",
function() {
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
// The next line is an undocumented feature (7-9-2010)
tileLayer.set('preserveViewport', true);
});
});
google.maps.event.addListenerOnce(stoneLayer, "defaultviewport_changed",
function() {
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
// The next line is an undocumented feature (7-9-2010)
stoneLayer.set('preserveViewport', true);
});
});
google.maps.event.addListenerOnce(woodLayer, "defaultviewport_changed",
function() {
google.maps.event.addListenerOnce(map, "bounds_changed", function() {
// The next line is an undocumented feature (7-9-2010)
woodLayer.set('preserveViewport', true);
});
});
var homeControlDiv = document.createElement('DIV');
var homeControl = new HomeControl(homeControlDiv, map);
homeControlDiv.index = 1;
map.controls[google.maps.ControlPosition.LEFT_BOTTOM].push(homeControlDiv);
}
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
