GOOGLE MAPS
Belo Horizonte, 05 08 2012

Teste Maps API




Código

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 400px; 
          width: 400px;
          margin: 0; 
          
          padding: 0; 
          border-top-left-radius:20px 20px;
             border-top-right-radius:20px 20px;
             border-bottom-left-radius:20px 20px;
             border-bottom-right-radius:20px 20px 
             }
             
      #map_canvas { 
          height: 400px;
          width: 400px;
          border:solid 2px #C2C2C2; 
          border-top-left-radius:20px 20px;
             border-top-right-radius:20px 20px;
             border-bottom-left-radius:20px 20px;
             border-bottom-right-radius:20px 20px ;
             margin-top: 30%;
             margin-left: 50%;
             }
             
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAFGZYs6qdtUK7RnrA0FSGx9sCpLjurW4c&sensor=true">
    </script>
      
       
       <!--
       *
       * O proximo infobox.js vem do "central repository of utility libraries"
       * http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/infobox/src/infobox.js?r=49
       *
       -->
          

    <script src="infobox.js" type="text/javascript"></script>
    <script type="text/javascript">
      function initialize() {
      var centerLatlng = new google.maps.LatLng(-19.922, -43.940);
           
       /*
       *
       * Você consegue mudar o estilo do mapa de forma mais facil no siguente link.
       * http://gmaps-samples-v3.googlecode.com/svn/trunk/styledmaps/wizard/index.html
       *
       */   
            var mapStyle  =    [
          {
            stylers: [
              { visibility: "simplified" }
            ]
          },{
            featureType: "transit",
            stylers: [
              { visibility: "off" }
            ]
          },{
            featureType: "poi",
            stylers: [
              { visibility: "off" }
            ]
          },{
            featureType: "poi.park",
            stylers: [
              { visibility: "off" }
            ]
          },{
            featureType: "road",
            stylers: [
              { visibility: "on" },
              { saturation: -66 },
              { gamma: 1.87 },
              { lightness: -19 },
              { weight: 0.5 }
            ]
          }
        ]
  
  var mapOptions = {
        styles:mapStyle
          ,center: centerLatlng
          ,zoom: 15
          ,mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        
        var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

// Marker 0 com mouse over e infowindow
        var icon = new google.maps.MarkerImage("https://lh3.googleusercontent.com/-fPHbrZByWi0/UAi_X_qXPbI/AAAAAAAAAHk/IS5G2wGojiI/s200/gdg_bh_02.png", null, null, new google.maps.Point(35,100), new google.maps.Size(32, 48));
        var shadow = new google.maps.MarkerImage("http://maps.gstatic.com/mapfiles/cb/camera_shadow.png", null, null, new google.maps.Point(32,100), new google.maps.Size(32, 48));
       
        
        var marker0 = new google.maps.Marker({ 
        position: centerLatlng,
        map: map, 
        title: 'GDG BH', 
        icon: icon ,
        shadow:shadow
                });
        
        var backGroundUrl   = 'http://lh6.googleusercontent.com/-kqRUb-MbdW4/UAi_aLSlG2I/AAAAAAAAAIU/AB01FjmUHz8/s640/gdg_bh_fondo.png' ;
        var logoTipoGdg = "https://lh3.googleusercontent.com/-fPHbrZByWi0/UAi_X_qXPbI/AAAAAAAAAHk/IS5G2wGojiI/s200/gdg_bh_02.png"
var contentstring = "<div style='height:38px;width:180px;border:3px solid grey;border-radius:10px 10px;background-image:url(" + backGroundUrl + ") '><div style='padding-left:2px;margin-top:3px;color:#3D85C6;font-family:open sans;font-weight:bold;font-size:1em'>  GDG BH  <div style='heigth:30px;width:20px;display:inline-block'> <img height='30px' width='20px' src=" + logoTipoGdg +"></img></div></div></div></div>"

        var infowindow = new google.maps.InfoWindow({
          content:contentstring
          ,maxWidth:600
          ,pixelOffset: new google.maps.Size(110, 110)
        })
        
        google.maps.event.addListener(marker0,"mouseover",function(){
        infowindow.open(map,marker0)
        })

google.maps.event.addListener(marker0,"mouseout",function(){
        infowindow.close()
        })  

        
        // Marker 1 com um infoBox  
        var centerLatlng2 = new google.maps.LatLng(-19.925, -43.945); 
var marker1 = new google.maps.Marker({          
            map: map, 
            position: centerLatlng2,
            title: 'gdg bh 2',
            icon: icon,
            shadow: shadow,
            }); 
        
        var backGroundUrl   = 'http://lh6.googleusercontent.com/-kqRUb-MbdW4/UAi_aLSlG2I/AAAAAAAAAIU/AB01FjmUHz8/s640/gdg_bh_fondo.png' ;
        var logoTipoGdg = "https://lh3.googleusercontent.com/-fPHbrZByWi0/UAi_X_qXPbI/AAAAAAAAAHk/IS5G2wGojiI/s200/gdg_bh_02.png"
var contentString2 = "<div style='height:55px;width:240px;border:3px solid grey;border-radius:10px 10px;background-image:url(" + backGroundUrl + ") '><div style='padding-left:5px;margin-top:5px;color:#3D85C6;font-family:open sans;font-weight:bold;font-size:2.5em'>  GDG BH  <div style='heigth:38px;width:26px;display:inline-block'> <img height='38px' width='26px' src=" + logoTipoGdg +"></img></div></div></div></div>"

var myOptions = {
                 content: contentString2
                ,disableAutoPan: false
                ,maxWidth: 0
                ,pixelOffset: new google.maps.Size(0, 0)
                ,zIndex: null
                ,boxStyle: { 
                  width: "240px"
                 }
                ,closeBoxMargin: "10px 2px 2px 2px"
                ,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
                ,infoBoxClearance: new google.maps.Size(1, 1)
                ,isHidden: false
                ,pane: "floatPane"
                ,enableEventPropagation: false
        };
            
var infoBox = new InfoBox(myOptions)        

        google.maps.event.addListener(marker1,"click",function(){
        infoBox.open(map,marker1)
        })
map.addOverlay(marker0, marker1);
      }
    </script>
  </head>
  <body  onload="initialize()">
    <div id="map_canvas" ></div>
  </body>
</html>