1

ここで少し助けを期待している皆さん。

最初にここで作業マップを作成しました：http： //leongaban.com/_stack/googlemaps/firstmap.html ポインターはその場で表示されますが、マップを削除する必要がありました| 衛星| 地形ボタン。

もう少し掘り下げて、ここでdisablingDefaultsの例を見つけました。ただし、google.map.jsファイルとAPIキーを使用してマップを機能させることができませんでした。そこで、Googleのサンプルページのスクリプトを使用しました。

これで、2番目のマップのマップビューオプションが削除されましたが、オーバーレイを表示できません ：（ http://leongaban.com/_stack/googlemaps/

助けてください！

目標：

  • GoogleマップのAPIキーを使用する
  • マップビューオプションボタンを削除します
  • その場所にオーバーレイポインタを置きます。

google API 2キーを使用した最初のマップのコード：

<head>
    <title>Test Google Maps</title>

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=AIzaSyAXsNu2EwRNqKJn9OmC19WPkEJFM0r6ALk&sensor=true"
        type="text/javascript"></script>

    <script type="text/javascript">

        function initialize() {

            // var myOptions = {
            //     zoom: 16,
            //     center: new google.maps.LatLng(40.750159, -73.976473),
            //     disableDefaultUI: true,
            //     mapTypeId: google.maps.MapTypeId.ROADMAP
            //   }

            // var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            // var point = new GLatLng(40.750159, -73.976473);
            // map.addOverlay(new GMarker(point));

            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(40.750159, -73.976473), 13);
            map.setUIToDefault();

            var myGeographicCoordinates = new GLatLng(40.750159, -73.976473)
            map.addOverlay(new GMarker(myGeographicCoordinates));

            // map.addOverlay(new GMarker(40.750159, -73.976473));


        }

    </script>

</head>

<body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>

更新された
作業コード！スタッカーに感謝!!!

<head>
    <title>Test Google Maps</title>

    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">

        function initialize() {

            var myOptions = {
                zoom: 16,
                center: new google.maps.LatLng(40.750159, -73.976473),
                disableDefaultUI: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
              }

            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            var myGeographicCoordinates = new google.maps.LatLng(40.750159, -73.976473);

            var marker = new google.maps.Marker({
                map:        map,
                position:   myGeographicCoordinates,
                title:      "My First Test Marker",
                visible:    true
            }); 
            }

    </script>

</head>

<body onload="initialize()" onunload="GUnload()">
    <div id="map_canvas" style="width: 450px; height: 370px"></div>
</body>
4

2 に答える 2

1

latLngオブジェクトの定義方法に問題があります。

new GLatLng(40.750159, -73.976473);

これは、Google MapsAPIv2で使用されました。現在、最新のapi（v3）を使用していますが、新しいapiでは、次のようにする必要があります。

new google.maps.LatLng(40.750159, -73.976473);

編集：編集後、マーカーに問題があるようです。API v3では、次のようにして新しいマーカーを作成します。

var marker = new google.maps.Marker({
    map:        map,
    position:   latLng
});

次のコードは、マップを設定し、デフォルトのUIを無効にし、マーカーを設定してマップに配置します。

function initialize() {
 var myOptions = {
  zoom: 16,
  center: new google.maps.LatLng(40.750159, -73.976473),
  disableDefaultUI: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 }

 var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
 var myGeographicCoordinates = new GLatLng(40.750159, -73.976473);
 var marker = new google.maps.Marker({
  map:        map,
  position:   myGeographicCoordinates
 });
}
于 2012-04-26T19:47:41.807 に答える
1

v3 APIに移行したので、マーカー作成コードを次のように変更します。

map.addOverlay(new GMarker(myGeographicCoordinates));

に：

var marker = new google.maps.Marker({
    map:        map,
    position:   myGeographicCoordinates,
    title:      "My First Test Marker",
    visible:    true
});

必要に応じて、マーカーコンストラクター関数に渡されるカスタムマーカーiconをMarkerOptionsで定義し、画像ファイルのパスと名前に等しい値を設定することもできます。

var marker = new google.maps.Marker({
    map:        map,
    icon:       "images/my-nice-marker.png",
    position:   myGeographicCoordinates,
    title:      "My First Test Marker",
    visible:    true
});
于 2012-04-26T22:25:30.927 に答える