JavaScript を使用して Google マップの色をカスタマイズできましたが、凡例とマーカーが表示されません。凡例についてはあまり心配していません。主にマーカーが表示されることに集中しています。特注マーカーを入れてみました。マーカーが表示されないのはなぜですか? それは適切なサイズで、透明度のある png です。助けてください！
<script type="text/javascript">
window.onload = function () {
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(32.817323, -96.788059),
zoom: 16,
mapTypeId: google.maps.MapTypeId.map
};
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var point = new google.maps.LatLng(32.817323, -96.788059);
var marker = new google.maps.Marker({
position: point,
map: map,
title: "Commercial Ideas"
});
}
var latlng = new google.maps.LatLng(32.817323, -96.788059);
var styles = [
{
featureType: "landscape",
stylers: [
{ color: '#ffffff' }
]
},{
featureType: 'road',
elementType: 'geometry',
stylers: [
{ color: '#d90000' },
{ weight: .1 }
]
},{
featureType: "natural",
stylers: [
{ hue: '#ff0000' }
]
},{
featureType: "road",
stylers: [
{ hue: '#610000' },
{ saturation: -60 }
]
}, {
featureType: 'road',
elementType: 'labels',
stylers: [
{ saturation: -50 },
]
},{
featureType: "building",
elementType: "labels",
stylers: [
{ hue: '#FC7067' }
]
},{
featureType: "poi", //points of interest
stylers: [
{ hue: '#d90000' }
]
}
];
var myOptions = {
zoom: 14,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
styles: styles
};
map = new google.maps.Map(document.getElementById('map'), myOptions);
}
var iconBase = 'images/assets/icons/';
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: iconBase + 'mapmarker.png',
shadow: iconBase + 'mapmarkershadow.png'
});
</script>
この URL をリンクしました。間違ったものをリンクしましたか？マップは表示されます。
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>
本文内の HTML は次のとおりです。
<div id="map"></div>
マップ ID の CSS スタイルは次のとおりです。
#map {
width: 100%;
height: 600px;
margin-bottom:15px;
}