多种风格的Google地图

时间:2013-01-10 12:00:01

标签: javascript google-maps-api-3

我的联系页面http://www.liebekuchen.co.uk/talk-to-us/上有一个样式的谷歌地图V3,可以正常处理精灵图像显示的一些问题,但是我需要将这个JSON添加到我的展厅页面{{3}上的两个单独的地图上}如何将样式添加到具有不同位置的多个地图? JS在页面头部调用;

<script type="text/javascript">

$(document).ready(function() {

    // V3 map

        var myLatlng = new google.maps.LatLng('51.4525368','0.2481994');


        var mapOptions = {

        mapTypeId: google.maps.MapTypeId.ROADMAP,
    center: new google.maps.LatLng('51.4600368','0.0781994'),
        zoom: 11,
        mapTypeControl: false,
        scrollwheel:false

        };

        var map = new google.maps.Map(document.getElementById("head-office-map"), mapOptions);


      var styles = [
      map styles here...
        ]
      }
    ];


    map.setOptions({styles: styles});

    var contentString = "";

   var infowindow = new google.maps.InfoWindow({
        content: contentString,

    });

    var $image = new google.maps.MarkerImage("../images/icons/LK-mapicon.png",
    // size
    new google.maps.Size(50, 50),
    // origin
    new google.maps.Point(0, 0),
    // anchor
    new google.maps.Point(25, 50));

    var $shadow = new google.maps.MarkerImage("../images/icons/LK-mapicon-shadow.png",
    // size
    new google.maps.Size(65, 39),
    // origin
    new google.maps.Point(0, 0),
    // anchor
    new google.maps.Point(25, 50));

    var marker = new google.maps.Marker({
        clickable: false,
        position: myLatlng,
        map: map,
        title:"Liebe Kuchen Head Office",
        icon:$image,
        shadow:$shadow
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });


});

1 个答案:

答案 0 :(得分:0)

如果要将相同的javascript添加到多个页面,请创建一个仅定义该代码(地图样式)的外部文件,并将其包含在所有需要它的地图中。 (未经测试)

<script type="text/javascript" src="scripts/mapstyle.js"></script>

“mapstyle.js”包含的位置:

  var styles = [
  map styles here...
    ]
  }
];