自定義地圖上缺少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);