Leaflet map play

by jonnyc

HTML

<html>
<head>
 <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css" />
 <!--[if lte IE 8]>
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css" />
 <![endif]-->    
 <script src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>    <script src="http://maps.google.com/maps/api/js?v=3.2&sensor=false"></script>
    <script src="https://raw.github.com/gist/2197042/2b90c41b39b7d5b3a851d8f256de2ebd3fe1fb74/leaflet-google.js"></script>
</head>
<body>
    <div id="map">
    </div>
</body>    
</html>

CSS

#map{
    height:400px;
}

JavaScript

var map = new L.Map('map', {center: new L.LatLng(51.505, -0.09), zoom: 13});
      var googleLayer = new L.Google('ROADMAP');
map.addLayer(googleLayer);
var marker = L.marker([51.5, -0.09]).addTo(map);
var polygon = L.polygon([
    [51.509, -0.08],
    [51.503, -0.06],
    [51.51, -0.047]
]).addTo(map);

var circle = L.circle([51.508, -0.11], 500, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5
}).addTo(map);