Google Map API

1 篇文章 / 0 new
author
Google Map API
以 form 為例的自行套用方式
function map01($form, &$form_state) {
    drupal_add_js('http://maps.google.com/maps/api/js?v=3&sensor=false',  'external', 'header');        
    // 變數抽離方式, 多邊形路徑
    $locationmap_settings = "var triangleCoords = [
            new google.maps.LatLng(25.041199, 121.511465),
            new google.maps.LatLng(25.041024, 121.513042),
            new google.maps.LatLng(25.039892, 121.512924),
            new google.maps.LatLng(25.039766, 121.513847),
            new google.maps.LatLng(25.038779, 121.513723),
            new google.maps.LatLng(25.038852, 121.512806),
            new google.maps.LatLng(25.039012, 121.511224),
            new google.maps.LatLng(25.041199, 121.511465),
        ];";
    drupal_add_js($locationmap_settings, 'inline', 'header');    
    drupal_add_js("
        function initialize() {
            google.maps.event.addDomListener(window, 'load', function() {
 
                var map = new google.maps.Map(document.getElementById('map-canvas'), {
                    zoom: 15, //呈現比例
                    center: new google.maps.LatLng(25.03998, 121.512077) //呈現中心點
                            //mapTypeId: google.maps.MapTypeId.TERRAIN //地形圖模式
                });
 
               // 多邊形路徑
                /*var triangleCoords = [
                    new google.maps.LatLng(25.041199, 121.511465),
                    new google.maps.LatLng(25.041024, 121.513042),
                    new google.maps.LatLng(25.039892, 121.512924),
                    new google.maps.LatLng(25.039766, 121.513847),
                    new google.maps.LatLng(25.038779, 121.513723),
                    new google.maps.LatLng(25.038852, 121.512806),
                    new google.maps.LatLng(25.039012, 121.511224),
                    new google.maps.LatLng(25.041199, 121.511465),
                ]; */
                // 建立多邊形
                bermudaTriangle = new google.maps.Polygon({
                    paths: triangleCoords,
                    strokeColor: '#00FF00',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#00ff00',
                    fillOpacity: 0.35
                });
                bermudaTriangle.setMap(map);
 
                //正方形
                var rectangle = new google.maps.Rectangle({
                    strokeColor: '#FF0000',
                    strokeOpacity: 0.8,
                    strokeWeight: 2,
                    fillColor: '#FF0000',
                    fillOpacity: 0.35,
                    map: map,
                    bounds: new google.maps.LatLngBounds(
                                new google.maps.LatLng(25.041394, 121.513246),
                                new google.maps.LatLng(25.041088, 121.513831) )
                });
 
            });
        }        
        ", 'inline','header'  );
    drupal_add_js("jQuery(document).ready(function () { initialize(); });", 'inline');//page 載入完成時呼叫
 
    $form['showChart'] = array(
        '#type' => 'markup',
        '#markup' => '<div id="map-canvas" style="width:940px; height:300px;"></div>',//放置 chart
    );
    return $form;
}
Free Web Hosting