0

以下は、GoogleマップjQueryv.3の追加をテストするマップの簡単な表現です。

<!DOCTYPE html>
<head>
    <title>Google Maps JQuery Plugin Test</title>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery /1.7/jquery.min.js"></script>
    <script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>
    <script type="text/javascript">
        $('#map_canvas').gmap({
            'some_option': 'some_value'
        }); // Add the contructor
        // addMarker returns a jQuery wrapped google.maps.Marker object 
        var $marker = $('#map_canvas').gmap('addMarker', {
            'position': '57.7973333,12.0502107',
            'bounds': true
        });
        $marker.click(function () {
            $('#map_canvas').gmap('openInfoWindow', {
                'content': 'Hello World!'
            }, this);
        });
    </script>
</head>
<body>
    <div id="map_canvas" style="width:250px;height:250px"></div>
</body>
</html>
4

1 に答える 1

0

まず、次のライブラリが正しくロードされていることを確認する必要があります。

<script type="text/javascript" src="PATH_TO_PLUGIN/jquery.ui.map.js"></script>

これには.gmap()関数が含まれているため、ライブラリが正しくロードされていない場合は、正確なエラーメッセージ（つまりgmap function does not exist）を受け取ります...

次に、完全にロードされる前にDOMにアクセスしようとしていますが、<head>タグ内のコードは、<div>実際にロードされる前に実行されます。

だからあなたはこれをするべきです：

$(function() {
    $('#map_canvas').gmap({
        'some_option': 'some_value'
    }); // Add the contructor
    // addMarker returns a jQuery wrapped google.maps.Marker object 
    var $marker = $('#map_canvas').gmap('addMarker', {
        'position': '57.7973333,12.0502107',
        'bounds': true
    });
    $marker.click(function() {
        $('#map_canvas').gmap('openInfoWindow', {
            'content': 'Hello World!'
        }, this);
    });
});

ブロック内でコードをラップする$(function() {と、DOMの準備ができたときにのみ実行されるようになります-のドキュメントを参照してくださいready()

ここでの実例

于 2012-05-21T15:24:22.650 に答える