自定义地图上缺少Google Map标记

Question

我设法通过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>

我链接了这个网址。 我是否链接了错误的链接？ 该地图确实显示。

<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

自定义标记不会出现，假设图像的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'
});

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

定义市场对象后，需要立即调用marker.setMap（map）。

完整版本：

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

marker.setMap(map);