Untitled

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <title>OpenLayers Google Layer Example</title>
    <link rel="stylesheet" href="../theme/default/style.css" type="text/css">
    <link rel="stylesheet" href="../theme/default/google.css" type="text/css">
    <link rel="stylesheet" href="style.css" type="text/css">
    <!-- this gmaps key generated for http://openlayers.org/dev/ -->
    <script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjpkAC9ePGem0lIq5XcMiuhR_wWLPFku8Ix9i2SXYRVK3e45q1BQUd_beF8dtzKET_EteAjPdGDwqpQ'></script>
    <script src="../lib/OpenLayers.js"></script>
    <script type="text/javascript">
        var map;

        function init() {
            map = new OpenLayers.Map('map');
            map.addControl(new OpenLayers.Control.LayerSwitcher());

            var gmap = new OpenLayers.Layer.Google(
                "Google Streets", // the default
                {numZoomLevels: 20}
            );
            var gphy = new OpenLayers.Layer.Google(
                "Google Physical",
                {type: G_PHYSICAL_MAP}
            );

            var ghyb = new OpenLayers.Layer.Google(
                "Google Hybrid",
                {type: G_HYBRID_MAP, numZoomLevels: 20}
            );
            var gsat = new OpenLayers.Layer.Google(
                "Google Satellite",
                {type: G_SATELLITE_MAP, numZoomLevels: 22}
            );
            var vectorLayer = new OpenLayers.Layer.Vector("Simple Geometry", {
                styleMap: new OpenLayers.StyleMap({'default':{
                    strokeColor: "#00FF00",
                    strokeOpacity: 1,
                    strokeWidth: 3,
                    fillColor: "#FF5500",
                    fillOpacity: 0.5,
                    pointRadius: 6,
                    pointerEvents: "visiblePainted",
                    // label with \n linebreaks
                    label : "${maille}",

                    fontColor: "${favColor}",
                    fontSize: "12px",
                    fontFamily: "Courier New, monospace",
                    fontWeight: "bold",
                    labelAlign: "${align}",
                    labelXOffset: "${xOffset}",
                    labelYOffset: "${yOffset}",
                    labelOutlineColor: "white",
                    labelOutlineWidth: 3
                }
            })
            });


            function onPopupClose(evt) {
                selectControl.unselect(selectedFeature);
            }
            function onFeatureSelect(feature) {
                selectedFeature = feature;
                popup = new OpenLayers.Popup.FramedCloud("chicken",
                                     feature.geometry.getBounds().getCenterLonLat(),
                                     null,
                                     "<div style='font-size:.8em'>Feature: " + feature.id +"<br>Area: " + feature.geometry.getArea()+"</div>",
                                     null, true, onPopupClose);
                feature.popup = popup;
                map.addPopup(popup);
            }
            function onFeatureUnselect(feature) {
                map.removePopup(feature.popup);
                feature.popup.destroy();
                feature.popup = null;
            }
            lon=0.042229166666667;
            lat=45.5625;
            var p1 = new OpenLayers.Geometry.Point(lon, lat);
            var p2 = new OpenLayers.Geometry.Point(lon+0.2, lat);
            var p3 = new OpenLayers.Geometry.Point(lon+0.2, lat+0.1);
            var p4 = new OpenLayers.Geometry.Point(lon, lat+0.1);
            var p5 = new OpenLayers.Geometry.Point(lon, lat);

            var pnt= [];
            pnt.push(p1,p2,p3,p4,p5);
            var ln = new OpenLayers.Geometry.LinearRing(pnt);

            var polygonFeature = new OpenLayers.Feature.Vector(
                new OpenLayers.Geometry.Polygon([ln]));

             polygonFeature.attributes = {
                maille: "1731 A 3",
            };
            vectorLayer.addFeatures([polygonFeature]);
            selectControl = new OpenLayers.Control.SelectFeature(vectorLayer,
                {onSelect: onFeatureSelect, onUnselect: onFeatureUnselect});
             map.addLayers([gmap,gphy,  ghyb, gsat,vectorLayer]);
            var polygon= new OpenLayers.Control.DrawFeature(vectorLayer,
                            OpenLayers.Handler.Polygon);
            map.addControl(polygon);

             map.addControl(selectControl);
             polygon.activate;
             selectControl.activate;


            //var pf = new OpenLayers.Feature.Vector(ln, null, style);


            map.setCenter(new OpenLayers.LonLat(8/60+45/3600,45+38/60+48/3600 ), 9);
        }
    </script>
  </head>
  <body onload="init()">
    <h1 id="title">Google Layer Example</h1>


    <div id="map" style="width:500px;height:500px"></div>

    <div id="docs">
     <p>
        For best performance, you must be using a version of the Google Maps
        API which is v2.93 or higher. In order to use this version of the API,
        it is best to simply set your application to use the string "v=2" in
        the request, rather than tying your application to an explicit version.</p>
     <p>
       In order to position the Google attribution div in the default location,
       you must include the extra theme/default/google.css stylesheet.</p>
    </div>
  </body>
</html>