Google Maps V3 Marker not showing

Question

I'm writing the below script to add a marker on click, the map loads fine but when I click on it no marker is added and there are no errors in the console, anyone have any suggestions as to what might be going on?

function selectMapLocation()
{
    var mapOptions = {
        zoom: 8,
        center: new google.maps.LatLng(37.7699298, -122.4469157)
    };

    var map = new google.maps.Map(document.getElementById('map'), mapOptions);

    google.maps.event.addListener(map, 'click', function(event){
        var marker = new google.maps.Marker({
            position: event.LatLng, 
            map: map
        });
    });
}

function loadSelectMapLocation()
{
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=selectMapLocation';
    document.body.appendChild(script);
}

Answer 1

A google.maps.MarkerOptions object doesn't have a setMap property.

map | Map|StreetViewPanorama | Map on which to display Marker.

The MouseClick event doesn't have a LatLng property. It is latLng (javascript is case sensitive).

latLng | LatLng | The latitude/longitude that was below the cursor when the event occurred.

 function selectMapLocation() { var mapOptions = { zoom: 8, center: new google.maps.LatLng(37.7699298, -122.4469157) }; var map = new google.maps.Map(document.getElementById('map'), mapOptions); google.maps.event.addListener(map, 'click', function(event){ var marker = new google.maps.Marker({ position: event.latLng, map: map }); }); } function loadSelectMapLocation() { var script = document.createElement('script'); script.type = 'text/javascript'; script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&callback=selectMapLocation'; document.body.appendChild(script); } loadSelectMapLocation(); 

 <div id="map" style="width:750px; height:450px; border: 2px solid #3872ac;"></div> 

Answer 2

You should use the map property on object construction instead of setMap .

EDIT : also LatLng is latLng , as mentioned in another response.

var marker = new google.maps.Marker({
    position: event.latLng, 
    map: map
});