Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-22, -45)
  };
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);
  
  //vertices do poligono
  var triangleCoords = [
    new google.maps.LatLng(-22.75554, -45.7877),
    new google.maps.LatLng(-22.466465, -45.118292),
    new google.maps.LatLng(-22.321384, -45.75737),
    new google.maps.LatLng(-22.75554, -45.7877),
  ];
  
  var minhasInformacoes = {
    codigo: 123456,
    nome: 'Triangulo'    
  }
  
  var area = new google.maps.Polygon({
     paths: triangleCoords,
     strokeColor: '#FF0000',
     strokeOpacity: 0.8,
     strokeWeight: 3,
     fillColor: '#FF0000',
     fillOpacity: 0.35,
     map: map,
     atributos: minhasInformacoes
  });
  
  google.maps.event.addListener(area, 'mouseover', function(){
    $("#painel").html("Código: " + this.atributos.codigo + "<br>" + "Nome: " + this.atributos.nome);    
  })
  
}
​
google.maps.event.addDomListener(window, 'load', initialize);
​
    </script>
  </head>
  <body>
    <div id="painel" style="position:absolute; top:10px; left:250px; width: 200px; height: 50px; background-color: #ffffff;z-index:1000"></div>
    <div id="map-canvas"></div>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
mateuspontesmoraespro
0viewers