Gmap3 - Forum

Gmap3 exchange platform

You are not logged in.

Ads
(server costs 27.50€ per month)

#1 2012-01-23 02:14:10

bellyache
Member
Registered: 2012-01-23
Posts: 4

Silly question!

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
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <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

Ads
(server costs 27.50€ per month)

#2 2012-01-23 13:03:15

charlietfl
Moderator
Registered: 2011-11-24
Posts: 201

Re: Silly question!

don't include them in page and use your own css

Offline

#3 2012-01-23 18:54:27

bellyache
Member
Registered: 2012-01-23
Posts: 4

Re: Silly question!

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

#4 2012-01-24 17:15:19

charlietfl
Moderator
Registered: 2011-11-24
Posts: 201

Re: Silly question!

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

#5 2012-01-24 19:28:08

bellyache
Member
Registered: 2012-01-23
Posts: 4

Re: Silly question!

i dont understand any of this, cant get anything to work.

Offline

#6 2012-01-24 20:01:44

jbdemonte
Administrator
From: Pourrières, France
Registered: 2011-11-21
Posts: 557

Re: Silly question!

Try to use the demo included in the download package instead of copying piece of code from my website, these will works

Offline

#7 2012-01-24 20:05:47

bellyache
Member
Registered: 2012-01-23
Posts: 4

Re: Silly question!

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

#8 2012-03-20 07:45:12

Abigail
Member
Registered: 2012-03-20
Posts: 1
Website

Re: Silly question!

It is so difficult for me.

Offline

Board footer

Powered by FluxBB