Software Público Brasileiro
Portal do

Software Público Brasileiro

  • Cadastre-se
  • Entrar

Google mapas com categorias (jquery)
Add new snippet


#11 by 6d3a11c542f9a2b3d62b2e65c5c3a74a?s=40&d=identicon Jaime Dias
← discover snippets
catgmaps.html
raw
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>


<title name="title">GMapas com categorias</title>

<style type="text/css">
  html,body,#map { height: 100% }
</style>



<script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?v=3"></script>
<script type="text/javascript">

$(window).load(function (){

  var places={
    restaurant:{
      label:'restaurants',
      //the category may be default-checked when you want to
      //uncomment the next line
      //checked:true,
      icon: 'http://maps.gstatic.com/mapfiles/markers2/marker.png' ,
      items: [
              ['Melt Bar and Grill', 41.485345, -81.799047],
              ['Sloane Pub', 41.486182, -81.824178],
              ['Spitfire Salon', 41.479670, -81.768430],
              ['Mahall\'s', 41.476989, -81.781094],
              ['Szechwan Garden', 41.485615, -81.787890]
             ]
    },
    park:{
      label:'parks',
      //the category may be default-checked when you want to
      //uncomment the next line
      //checked:true,
     icon:'http://maps.gstatic.com/mapfiles/markers2/boost-marker-mapview.png',
      items: [
              ['Lakewood Park', 41.494457, -81.797605],
              ['Madison Park', 41.476969, -81.781929],
              ['Tuland Park', 41.464052, -81.788041]
             ]
    }  
  },
  map = new google.maps.Map(
              document.getElementById('map'), 
              {
                zoom: 14,
                center: new google.maps.LatLng(41.485345, -81.799047),
              }
            ),
  infowindow = new google.maps.InfoWindow(),

  // a  div where we will place the buttons
  ctrl=$('<div/>').css({background:'#fff',
                        border:'1px solid #000',
                        padding:'4px',
                        margin:'2px',
                        textAlign:'center'
                       });
  //show all-button
  ctrl.append($('<input>',{type:'button',value:'mostrar todos'})
                .click(function(){
                  $(this).parent().find('input[type="checkbox"]')
                    .prop('checked',true).trigger('change');
                }));
  ctrl.append($('<br/>'));

  //clear all-button
  ctrl.append($('<input>',{type:'button',value:'limpar todos'})
                .click(function(){
                  $(this).parent().find('input[type="checkbox"]')
                    .prop('checked',false).trigger('change');
                }));
  ctrl.append($('<hr/>'));

  //now loop over the categories
  $.each(places,function(c,category){

    //a checkbox fo the category
    var cat=$('<input>',{type:'checkbox'}).change(function(){
       $(this).data('goo').set('map',(this.checked)?map:null);
    })
      //create a data-property with a google.maps.MVCObject
      //this MVC-object will do all the show/hide for the category 
      .data('goo',new google.maps.MVCObject)
      .prop('checked',!!category.checked)

      //this will initialize the map-property of the MVCObject
      .trigger('change')

      //label for the checkbox
      .appendTo($('<div/>').css({whiteSpace:'nowrap',textAlign:'left'})
        .appendTo(ctrl))
      .after(category.label);

      //loop over the items(markers)
      $.each(category.items,function(m,item){
         var marker=new google.maps.Marker({
                position:new google.maps.LatLng(item[1],item[2]),
                title:item[0],
                icon:category.icon
              });

         //bind the map-property of the marker to the map-property
         //of the MVCObject that has been stored as checkbox-data 
         marker.bindTo('map',cat.data('goo'),'map');
         google.maps.event.addListener(marker,'click',function(){
            infowindow.setContent(item[0]);
            infowindow.open(map,this);
         });
      });

  });

 //use the buttons-div as map-control 
 map.controls[google.maps.ControlPosition.TOP_RIGHT].push(ctrl[0]);
}
);
</script>
</head>
<body>
	<div id="map"></div>
</body>
</html>
Voltar para o topo
Assuntos
Publique seu software
Prestadores de serviço
Espaços dos municípios
Software Público
Entenda o que é
Eventos
Prêmios
Publicações
Serviços
FAQ
Contato
Relatar erros
RSS
O que é?
Assine
Navegação
Acessibilidade
Mapa do site

Desenvolvido com os projetos de software livre Colab, Gitlab, Mailman e Noosfero