5

私はgithubでGMaps.jsを使用しようとしていますが、何らかの理由で機能していません.誰かが私を正しい方向に向けることができれば、私はそれを正しく入力したと確信しています. ( http://i.imgur.com/3LkL6xS.png実際の写真は、ここで十分な大きさでない場合に備えて。)

壊れたコード

新しいソースコードは次のとおりです。

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://maps.google.com/maps/api/js?key=AIzaSyBi7e8AiTyqWiFt9vlbGqsAzGyRhVWqCsk&sensor=true"></script>
<script src="js/gmaps.js"></script>
<script>
/**
  * Basic Map
  */
$(document).ready(function(){
 var map = new GMaps({
    div: '#basic_map',
    lat: 51.5073346,
    lng: -0.1276831,
    zoom: 12,
    zoomControl : true,
    zoomControlOpt: {
        style : 'SMALL',
        position: 'TOP_LEFT'
    },
    panControl : false,
  });
});
</script>
</head>
<body>
<div id="basic_map"></div>
</body>
</html>
4

4 に答える 4

14

コメントで言ったように、おそらく div の幅と高さが欠けているので、show map in を試してみてください。

ここでjsfiddleが機能しています：jsFiddleで遊ぶ

$(document).ready(function () {
    var map = new GMaps({
        div: '#basic_map',
        lat: 51.5073346,
        lng: -0.1276831,
        width: '500px',
        height: '500px',
        zoom: 12,
        zoomControl: true,
        zoomControlOpt: {
            style: 'SMALL',
            position: 'TOP_LEFT'
        },
        panControl: false
    });
});

コードに幅と高さを追加しました。
またはここでは、CSS の幅と高さで同じ結果が得られます。あまり違いはありません。

于 2013-03-03T08:49:07.243 に答える
2

コードをテストしました。div 要素の幅と高さを設定する必要があるかもしれません。firebugs を使用して、マップが既に作成されているかどうかを確認できます

このようにdivを変更します <div id="basic_map" style="height: 100px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;">

于 2013-03-03T08:33:22.823 に答える