You are not logged in.
Pages: 1
I have found what I was looking for on your site, the ability to show a highlighted area with check boxes as shown here http://gmap3.net/api/add-kml-layer.html
I stripped back most of the source code as just want a plain page with the map only and the check boxes, however when I load the page the source code and the banner still shows at the top. How do you get rid of the brown top banner and the source code on the left?
Its probably a simple solution but its baffling me
here is the stripped down page (i have kept your direct links to css and js just for the purpose of this posting.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="http://gmap3.net/style.css" />
<script type="text/javascript" src="http://gmap3.net/js/jquery-1.7.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="http://gmap3.net/syntaxhighlighter/styles/sh.min.css"/>
<script type="text/javascript" src="http://gmap3.net/syntaxhighlighter/scripts/sh.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmap3.net/js/gmap3-4.1-min.js"></script>
<script type="text/javascript" src="http://gmap3.net/js/script.js"></script>
</head>
<body>
<div id="page" class="api_addkmllayer">
<div class="tools">
<input type="checkbox" id="chk1" checked>KML 1
<input type="checkbox" id="chk2" checked>KML 2
</div>
<div class="example inline">
<pre class="inline">
$('#test').gmap3(
{ action: 'addKmlLayer',
url: 'http://www.gmap3.net/kml/rungis.kml',
options:{
suppressInfoWindows: true
},
tag:'chk1'
},
{ action: 'addKmlLayer',
url: 'http://www.gmap3.net/kml/sogaris.kml',
options:{
suppressInfoWindows: true
},
tag:'chk2'
}
);
$('.tools input[type=checkbox]').change(function(){
var map = $('#test').gmap3('get'),
kml = $('#test').gmap3({
action:'get',
name:'kmllayer',
tag: $(this).attr('id')
});
kml.setMap( $(this).is(':checked') ? map : null );
});
</pre>
<div id="test" class="map inline"></div>
</div>
</body>
</html>
Offline
don't include them in page and use your own css
Offline
I have tried it with a very simple css script but cannot get the map to show, just code shows, here is test page
http://manchester-axolotls.co.uk/script/
Offline
code in a <pre> tag is for display output in a page only, it doesn't run so you have no js code initializing map. Map container must also have dimensions
Offline
i dont understand any of this, cant get anything to work.
Offline
Try to use the demo included in the download package instead of copying piece of code from my website, these will works
Offline
I only copied the website code to gauge an understanding, but if i cant even understand that i am in trouble.
I have looked at the demo in the package and is in a different format, i cant seem to add a 2nd or 3rd checkbox, again as soon as i add something to the code it goes weird and two maps show rather than just the one with two checkboxes. I plan on adding at least 7 check boxes so just one want map to show and then the check boxes alow overlapping kml data
example
<html>
<head>
<script type="text/javascript" src="../jquery/jquery-1.4.4.min.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript" src="../gmap3.js"></script>
<style>
body{
text-align:center;
}
.gmap3{
margin: 20px auto;
border: 1px dashed #C0C0C0;
width: 700px;
height: 450px;
}
</style>
<script type="text/javascript">
$(function(){
$('#test1').gmap3(
{ action : 'init', mapTypeId : google.maps.MapTypeId.ROADMAP, center:{lat: 55.7131873,lng: -4.8662567}, zoom: 12},
{ action: 'addKmlLayer',
url: '01.kml',
options:{
suppressInfoWindows: true
},
events:{
click: function(kml, event){
$("#test1-text").html(event.featureData.description);
}
}
}
);
$('#chk1').change(function(){
var map = $('#test1').gmap3('get'),
kml = $('#test1').gmap3({
action:'get',
name:'kmllayer'
});
kml.setMap( $(this).is(':checked') ? map : null );
});
$('#test2').gmap3(
{ action : 'init', mapTypeId : google.maps.MapTypeId.ROADMAP, center:{lat: 55.7131873,lng: -4.8662567}, zoom: 12},
{ action: 'addKmlLayer',
url: '02.kml',
options:{
suppressInfoWindows: true
},
events:{
click: function(kml, event){
$("#test1-text").html(event.featureData.description);
}
}
}
);
$('#chk2').change(function(){
var map = $('#test2').gmap3('get'),
kml = $('#test2').gmap3({
action:'get',
name:'kmllayer'
});
kml.setMap( $(this).is(':checked') ? map : null );
});
});
</script>
</head>
<body onload="initialize()">
<input type="checkbox" id="chk1" checked>KML
<div id="test1" class="gmap3"></div>
<div id="test1-text"></div>
<input type="checkbox" id="chk2" checked>KML
<div id="test2" class="gmap3"></div>
<div id="test2-text"></div>
</body>
</html>
Last edited by bellyache (2012-01-24 20:07:30)
Offline
It is so difficult for me.
Offline
Pages: 1