javascript - 1 ページに 2 つのスタイルの Google マップ

Question

1 つのページに 2 つの Google マップ (API 3) を設定するのを手伝っていただければ幸いです。彼らはいくつかの共通のスタイルを持っています。1 つを実行できますが、2 つを一緒に実行することはできません。

• http://theredfrog.com/new/temp3.html - 1 つのマップ (OK)
• http://theredfrog.com/new/temp4.html - 2 つのマップ (破損)

これがスクリプトです...

<script type="text/javascript">
      function initialize() {
var styles = [
  ....

];

var hulloptions = {
    mapTypeControlOptions: {
        mapTypeIds: [ 'Styled']
    },

    center: new google.maps.LatLng(53.7413176, -0.3353987),
    zoom: 15,
    mapTypeId: 'StyledHull'
};

var leedsoptions = {
    mapTypeControlOptions: {
        mapTypeIds: [ 'Styled']
    },

    center: new google.maps.LatLng(53.796177,-1.541862),
    zoom: 15,
    mapTypeId: 'StyledLeeds'
};

maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);

var image = './skin/logo.png';
var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);

var rfdMarkerHull = new google.maps.Marker({
      position: HullLatLng,
      map: maphull,
      icon: image
  });
  var rfdMarkerLeeds = new google.maps.Marker({
      position: LeedsLatLng,
      map: leedshull,
      icon: image
  });

var styledMapTypeHull = new google.maps.StyledMapTypeHull(styles, { name: 'RFD Hull' });
var styledMapTypeLeeds = new google.maps.StyledMapTypeLeeds(styles, { name: 'RFD Leeds' });
maphull.mapTypes.set('StyledHull', styledMapTypeHull);
mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
}

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

</script>

Answer 1

あなたの問題は次のとおりです（デバッガーでコードを実行する必要があります）：

1. タイプミス（map: mapleeds,ないmap: leedshull,

2. 初期化する前に変数を使用することはできません

3. これらは無効です: google.maps.StyledMapTypeHull, google.maps.StyledMapTypeLeeds(検索と置換が間違っている可能性があります。google.maps.StyledMapType

   <script type="text/javascript">
   var maphull = null;
   var mapleeds = null;
   function initialize() {
   var styles = [
   {
      stylers: [
        { saturation: -100 }
      ]   
    },{
      featureType: 'water',
      elementType: 'all',
   stylers: [
          { lightness: -74 },
          { visibility: 'on' }
         ]
    },{
      featureType: 'landscape',
      elementType: 'geometry',
      stylers: [
       { lightness: -26 },
       { visibility: 'simplified' }
      ]
   },{
   featureType: 'road',
   elementType: 'geometry',
   stylers: [
       { hue: '#efefef' },
       { lightness: 83 },
       { visibility: 'simplified' }
      ]
   },{
         featureType: 'poi',
         elementType: 'all',
           stylers: [
         { hue: '#999999' },
             { saturation: -100 },
             { lightness: -23 },
             { visibility: 'on' }
          ]
   },{
       featureType: 'road',
       elementType: 'labels',
           stylers: [
            { saturation: -100 },
            { visibility: 'on' }
      ]
     }
   ];
   
   var hulloptions = {
      mapTypeControlOptions: {
          mapTypeIds: [ 'Styled']
      },
   
      center: new google.maps.LatLng(53.7413176, -0.3353987),
      zoom: 15,
      mapTypeId: 'StyledHull'
    };
   
    var leedsoptions = {
       mapTypeControlOptions: {
           mapTypeIds: [ 'Styled']
       },
   
       center: new google.maps.LatLng(53.796177,-1.541862),
       zoom: 15,
       mapTypeId: 'StyledLeeds'
     };
   
   var image = './skin/logo.png';
   var HullLatLng = new google.maps.LatLng(53.7413176, -0.3353987);
   var LeedsLatLng = new google.maps.LatLng(53.796177,-1.541862);
   
   var styledMapTypeHull = new google.maps.StyledMapType(styles, { name: 'RFD Hull' });
   var styledMapTypeLeeds = new google.maps.StyledMapType(styles, { name: 'RFD Leeds' });
   
   maphull = new google.maps.Map(document.getElementById("map-hull"),hulloptions);
   mapleeds = new google.maps.Map(document.getElementById("map-leeds"),leedsoptions);
   
   maphull.mapTypes.set('StyledHull', styledMapTypeHull);
   mapleeds.mapTypes.set('StyledLeeds', styledMapTypeLeeds);
     var rfdMarkerHull = new google.maps.Marker({
        position: HullLatLng,
        map: maphull,
        icon: image
     });
     var rfdMarkerLeeds = new google.maps.Marker({
         position: LeedsLatLng,
         map: mapleeds,
         icon: image
     });
   }
   
    google.maps.event.addDomListener(window, 'load', initialize);
   
    </script>