Leaflet with google maps

HTML

<script src="https://maps.google.com/maps/api/js?sensor=false&amp;dummy=.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css">
<script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
<script src="https://rawgithub.com/shramov/leaflet-plugins/master/layer/tile/Google.js"></script>
<body>
<div id="map" ></div>
    <div id="gmap"></div>
</body>

CSS

html, body {
        margin: 0;
        width: 100%;
        height: 100%;
}

#map, #gmap {
        margin: 0;
        width: 100%;
        height: 50%;
}

JavaScript

var pos = new L.LatLng(45.5,-73.5);
console.log(L);

var map = new L.Map('map', {
                center: pos,
                zoom: 16,
               // markerZoomAnimation:false
            });

var ggl = new L.Google('ROADMAP');
map.addLayer(ggl);
var osm = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png');
L.control.layers({'Google':ggl,'OSM':osm}).addTo(map);

L.marker(pos).addTo(map);

var gmap;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  gmap = new google.maps.Map(document.getElementById('gmap'),
      mapOptions);
}

google.maps.event.addDomListener(window, 'load', initialize);