两页样式的Google地图在单页上

问题描述

我很感激在单个页面上设置两个Google地图（API 3）的帮助。他们有一些共享的样式。我可以得到一个运行，但不是两个在一起。

• - 一张地图（确定）


• - 两张地图（破碎）





这是脚本...

 < script type = 文本/ JavaScript的 > 
函数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> 
  




解决方案

你的问题是（你需要运行你的代码使用调试器）：





1. 错别字（ map：mapleeds，不是 map：leedshull，




2. 排序，在初始化之前不能使用变量




3. 这些无效： google.maps.StyledMapTypeHull ， google.maps.StyledMapTypeLeeds （可能是搜索和替换出错了。应该是 google.maps.StyledMapType

   < code>< 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：'风景'， 
    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'}，
    {饱和度：-100}，
    {亮度：-23}，
    {能见度：'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> 
     







I'd appreciate some help setting up two Google maps (API 3) on a single page. They've got some shared styles. I can get a single one running, but not two together.

• http://theredfrog.com/new/temp3.html - one map (ok)
• http://theredfrog.com/new/temp4.html - two maps (broken)

Here's the script...

<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>

解决方案

Your problems are (you need to run through your code with a debugger):

1. typos (map: mapleeds, not map: leedshull,

2. ordering, you can't use variables before you initialize them

3. these are not valid: google.maps.StyledMapTypeHull, google.maps.StyledMapTypeLeeds (maybe a search and replace gone wrong. Should be 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>
   

这篇关于两页样式的Google地图在单页上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！