Mapstraction Examples - Editing Google Features

Source Code:


              <html>

                <head>

                  <title>Mapstraction Examples - Editing Google Features</title>

                  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  
                  <script src="http://mvn.idelab.uva.es/idelabmapstraction/downloads/1.0/idelabmapstraction.js" type="text/javascript"></script>


                  <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAnfs7bKE82qgb3Zc2YyS-oBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSySz_REpPq-4WZA27OwgbtyR3VcA"></script>

                </head>

                <body>

                    <div id="mapstraction"></div>

                    <script type="text/javascript">

  
                        // initialise the map with your choice of API

                        var mapstraction = new mxn.MapstractionInteractive('mapstraction','google');

                        mapstraction.setCenterAndZoom(new mxn.LatLonPoint(40, -3),5);


                        //adding features to map

                        var point;

                        var points = []

                        point = new mxn.LatLonPoint(40.5,-3.5);

                        var marker = new mxn.Marker(point);

                        mapstraction.addMarker(marker);


                        point = new mxn.LatLonPoint(40.0, -3.5)

                        points.push(point);

                        point = new mxn.LatLonPoint(41.0, -2.5)

                        points.push(point);

                        point = new mxn.LatLonPoint(40.0, -1.5)

                        points.push(point);

                        point = new mxn.LatLonPoint(41.0, -0.5)

                        points.push(point);


                        var linestring = new mxn.Polyline(points);

                        mapstraction.addPolyline(linestring)


                        point = new mxn.LatLonPoint(40.0, -4.5)

                        points.push(point);

                        point = new mxn.LatLonPoint(41.0, -4.5)

                        points.push(point);

                        point = new mxn.LatLonPoint(41.0, -5.5)

                        points.push(point);

                        point = new mxn.LatLonPoint(40.0, -5.5)

                        points.push(point);


                        var polygon = new mxn.Polyline(points);

                        polygon.setCosed(true);

                        mapstraction.addPolyline(polygon)


                        //adding event listeners to map

                        mapstraction.markerChanged.addHandler(function(event,map,marker){

                            alert('Marker moved to: '+marker.marker.location.lat+' , '+marker.marker.location.lon)})

                        mapstraction.polylineChanged.addHandler(function(event,map,polyline){

                            alert('Polyline modified: Now it has '+polyline.polyline.points.length+' vertices')})

                    </script>

                </body>

              </html>
Mapstraction Examples - Editing Google Features

Demo Functions

Interactive Functions

Source Code:
