自定义地图上缺少谷歌地图标记

Question

我设法通过 javascript 自定义谷歌地图的颜色，但我的图例和标记不会出现。我不太担心传说，我主要关注我的标记出现。我试着放一个定制的标记。为什么我的标记没有出现？这是正确的大小，具有透明度的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>

我链接了这个网址。我是不是链接错了？地图会显示出来。

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

    }

Answer 1

您需要在定义市场对象后立即调用 marker.setMap(map)。

完整版：

var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'mapmarker.png',
    shadow: iconBase + 'mapmarkershadow.png'
});

marker.setMap(map);

Answer 2

不知道为什么这两个都在那里

    var marker = new google.maps.Marker({
    position: point,
    map: map,
    title: "Commercial Ideas"

和

    var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    icon: iconBase + 'mapmarker.png',
    shadow: iconBase + 'mapmarkershadow.png'

我试过了，效果很好：

<script type="text/javascript">
function init() {
  var myLatlng = new google.maps.LatLng(32.817323, -96.788059);
  var myOptions = {zoom: 16,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP,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 map = new google.maps.Map(document.getElementById('map'), myOptions);
  var contentString = '<div class="addresspopup">'+
  '<p>Commercial Ideas</p>'+
  '</div>';
  var markerimage = 'mapmarker.png';
  var infowindow = new google.maps.InfoWindow({content: contentString, maxWidth: 350});
  var marker = new google.maps.Marker({icon: markerimage, animation:     google.maps.Animation.DROP,position: myLatlng,map: map,title: 'Commercial Ideas'});
  google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});
}

  google.maps.event.addDomListener(window, 'load', init);
</script>

这还假设“mapmarker.png”与您的 html 页面位于同一目录中。

Answer 3

自定义标记没有出现，假设图片的 URL 是正确的并且图片确实存在那里，是因为 myLatLng 没有定义，从 javascript 控制台报告的错误中应该很明显。

改变这个：

var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: iconBase + 'mapmarker.png',
  shadow: iconBase + 'mapmarkershadow.png'
});

到这里：

var marker = new google.maps.Marker({
  position: latlng,
  map: map,
  icon: iconBase + 'mapmarker.png',
  shadow: iconBase + 'mapmarkershadow.png'
});