0

みなさんこんにちは！

API v3 を使用してカスタム スタイルの Google マップを作成しようとしています。マップは最終的に次の Wordpress ページ (ページの右側に 310px x 537px の空白スペース) に表示されます: http://www.flatschicago.com/edgewater-chicago-apartments/

JavaScript/HTML コードをGoogle Maps Javascript API v3—Simple styled mapsページからコピーし、Web サイト全体のテーマに合わせて配色を変更しました。必要な色でコードをフォーマットすることができました。また、Web ページで指定されたスペースに収まるようにマップのサイズをフォーマットすることもできました。

私が問題を抱えている3つのことは次のとおりです。

  1. 5 つ以上のカスタム プロット マーカーをマップに追加したいと考えています。このコードはどこに追加すればよいですか?
  2. 通りのラベルを地図に表示したい。このコードはどこに追加すればよいですか?
  3. Wordpress ページにコードを追加しようとしましたが、機能しませんでした。追加するだけの JavaScript/HTML コードの特定の部分はありますか?

ここに私がこれまでに持っているコードがあります。

    <html>
    <head>
    <title>Simple styled maps</title>
    <style>
    html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }

    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
    <script>
    var map;
    var edgewater = new google.maps.LatLng(41.987245, -87.661233);

    var MY_MAPTYPE_ID = 'custom_style';

    function initialize() {

    var featureOpts = [

    {
      stylers: [
        { hue: '#3b3d38' },
        { visibility: 'simplified' },
        { gamma: 0.5 },
        { weight: 0.5 }
      ]
    },
    {
    featureType: 'poi.business',
      elementType: 'labels',
      stylers: [
        { visibility: 'off' }
      ]
    },
    {
      featureType: 'water',
      stylers: [
        { color: '#3b3d38' }
      ]
    }
    ];

      var mapOptions = {
    zoom: 12,
    center: edgewater,
    mapTypeControlOptions: {
      mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
    },
    mapTypeId: MY_MAPTYPE_ID
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);


    var styledMapOptions = {
    name: 'Custom Style'
    };

    var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions);

    map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    </script>
    </head>
    <body onload='intialize()'>
    <div id="map-canvas" style='width:310px; height:537px;'></div>
   </body>
   </html>

1) 5 つ以上のカスタム プロット マーカー の追加 参照しているコードは、次のページからのものです: page link。各場所にマーカー画像と経度/緯度を追加する必要があることは理解していますが、このコードをコピーして既に作成したコードに貼り付けようとすると、マップが機能しません。このコードをどこにコピーして貼り付ける必要がありますか? 関数の initialize() コード内に入りますか? それとも独自の機能ですか？非常に混乱。

2) ストリート ラベル の追加 参照しているコードは、Google マップ Javascript API v3 - スタイル付きマップページからのものです。私がやりたいことは、地図上で通りのラベルを表示できるようにすることだけです。私が言及しているコードはこれです。これを自分のコードに入れてみましたが、やはりうまくいきませんでした。これらのラベルを機能させる「道路」、「オン」などの単純なラベルはありますか?

var styleArray = [
{
featureType: "all",
stylers: [
  { saturation: -80 }
]
},{
featureType: "road.arterial",
elementType: "geometry",
stylers: [
  { hue: "#00ffee" },
  { saturation: 50 }
]
},{
featureType: "poi.business",
elementType: "labels",
stylers: [
  { visibility: "off" }
]
}
];

3) Wordpress ページにコードを追加する マップは最終的に/edgewater-chicago-apartments/ pahe に表示されます。マップ用に残したスペースには次のラベルが付けられてい <td class="neighborhood-map" rowspan="5"></td>ます。

誰かがこれで私を助けてくれたら、私は永遠に感謝します. 私はとても近くにいるように感じますが、これらの 3 つのことが私を妨げていて、とてもイライラしています。誰？

4

1 に答える 1

1

マーカーを追加するには、実際のデータ (JSON 形式) が必要です。例えば：

    // yourJsonData = data in valid JSON format
for ( i = 0; i < yourJsonData.length; i++ ) {
    var latlng = new google.maps.LatLng(yourJsonData[ i ].lat, yourJsonData[ i ].long);
    var marker = new google.maps.Marker({
        map: map,
        icon: yourURL + '/path-to-custom-markers/' + yourJsonData[ i ].icon,
        position: latlng,
        title: yourJsonData[ i ].title,
        html: '<div class="info-window">Your window text</div>'
    });
    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(this.html);
        infowindow.setOptions({maxWidth: 800});
        infowindow.open(map, this);
    });
}

このコードは、緯度、経度などの値を持つ配列 (yourJsonData) をループします。

于 2013-10-16T19:19:16.983 に答える