Google Map Marker Missing On Custom Map

Question

I managed to customize the colors of the google map through the javascript, but my legend and marker won't appear. I'm not too worried about the legend, I'm mainly focusing on my marker appearing. I tried putting in a custom-made marker. Why doesn't my marker appear? It's the right size, png with transparency. Help Please!

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

I linked out this url . Did I link out the wrong one? The map DOES show up.

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false">
</script>

the HTML within the body is as so:

<div id="map"></div>

The CSS styling for the map ID is as so:

 #map {

        width: 100%;
        height: 600px;
        margin-bottom:15px;

    }

Answer 1

The custom marker doesn't appear, assuming the URL of the image is correct and the image actually exists there, is because myLatLng is not defined, should be obvious from the errors reported in the javascript console.

Change this:

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

To this:

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

Answer 2

Not sure why both of these are there

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

and

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

I've tried this and it works:

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

This also assumes that 'mapmarker.png' is in the same directory as your html page.

Answer 3

You need to call marker.setMap(map) right after you define the market object.

Full version:

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

marker.setMap(map);