Subversion Repositories eFlore/Applications.cel

Rev

Rev 427 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <title>Google Maps API Example - Observations</title>
                
                <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
                <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
                
                <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
                <script type="text/javascript" src="<?=$url_base?>services/squelettes/markerclusterer_compiled.js"></script>
                
                <script src="<?=$url_json?>" type="text/javascript"></script>
                <script type="text/javascript">
                //<![CDATA[
                        var markerClusterer = null;
                        var map = null;
                        var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&chco=FFFFFF,008CFF,000000&ext=.png';
                        var carteCentre = new google.maps.LatLng(46.4, 3.10);
                        var carteOptions = {
                                zoom: 6,
                                center: carteCentre,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                        };
                        
                        function refreshMap() {
                                if (markerClusterer) {
                                        markerClusterer.clearMarkers();
                                }

                                var markers = [];
                                var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(24, 32));
                                
                                for (var i = 0; i < obs.nombre; ++i) {
                                        var latLng = new google.maps.LatLng(obs.points[i].coord_x, obs.points[i].coord_y);
                                        var marker = new google.maps.Marker({
                                                position: latLng,
                                                draggable: true,
                                                icon: markerImage
                                        });
                                        markers.push(marker);
                                }

                                markerClusterer = new MarkerClusterer(map, markers);
                        }

                        function initialize() {
                                map = new google.maps.Map(document.getElementById('carte'), carteOptions);
                                refreshMap();
                        }
                //]]>
                </script>
                <style type="text/css">
                        html, body {
                                margin:0;
                                padding:0;
                                height: 100%;
                                font-family: Arial;
                                font-size: 12px;}
                        #carte {
                                width:100%;
                                height:100%;
                </style>
        </head>

        <body onload="initialize()">
                <div id="carte"></div>
        </body>
</html>