如何使用Styled Google地图?

时间:2013-01-02 11:29:43

标签: html google-maps google-maps-api-3

我是使用Google Maps API的新手,我无法让它工作。

我希望像http://labfiftyfive.com/这样的效果在底部附近有一张地图,这是一个红色的制作者。这就是我想要的效果。

我已经进入代码并获得了他们正在使用的内容,如Google API https://maps.googleapis.com/maps/api/js?sensor=false,然后是Jscript(下图),然后我将其放入我的网站,但没有成功。

var MY_MAPTYPE_ID = 'lab55';
var map;
var theLab = new google.maps.LatLng(-32.055658, 115.747989);

    var mapOptions = {
        zoom: 15,
        center: theLab,
  disableDefaultUI: true,
  zoomControl: true,
  scrollwheel: false,
        mapTypeControlOptions: {
            mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
        },
        mapTypeId: MY_MAPTYPE_ID
    };

    var stylez = [
        {
            featureType: 'all',
            elementType: 'all',
            stylers: [
                { hue: '#C1272D' },
                { saturation: 40 },
                { lightness: 40 }
            ]
        }
    ];

    var image = 'img/marker.png';

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

    map.setOptions({styles: stylez});

    var lab55MapType = new google.maps.StyledMapType(stylez);

map.mapTypes.set(MY_MAPTYPE_ID, lab55MapType);

var markerIcon = new google.maps.MarkerImage(
  image,
  null,
  null,
  null,
  new google.maps.Size(25, 34)
);
    var labMarker = new google.maps.Marker({ 
    position: theLab,
    map: map,
    icon: markerIcon
});

var infowindow = new google.maps.InfoWindow({
    content: "26/36 South Tce<br />Fremantle, 6160"
});
google.maps.event.addListener(labMarker, 'click', function() {
  infowindow.open(map,labMarker);
});

我已经浏览了Google上的所有文档但没有成功。

所以我的问题是,有没有人知道任何Google教程要做到这一点?或者可能有用的提示?

非常感谢任何帮助。

谢谢

1 个答案:

答案 0 :(得分:1)

只使用该代码(将元素ID更改为我在HTML中使用的代码)works for me。我的猜测是你的代码中的其他地方有问题(比如地图div大小为零)。