多种风格的谷歌地图

Multiple Styled Google Maps

本文关键字：谷歌地图 风格      更新时间：2023-09-26

我有一个样式的谷歌地图V3在我的联系页面http://www.liebekuchen.co.uk/talk-to-us/这工作好吧与精灵图像显示的几个问题，但我需要将这个JSON添加到我的展厅页面上的两个独立的地图http://www.liebekuchen.co.uk/kitchen-showrooms/我如何添加样式到多个地图与不同的位置?

<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);
    });

});

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

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

其中"mapstyle.js"包含:

  var styles = [
  map styles here...
    ]
  }
];
相关文章：