通过侦听器事件放置时，Google地图标记未显示

Question

SPOILER ALERT: I had a typo in my code.

---

The code below successfully displays the initial map with the initial marker at the latitude/longitude set.

I tried to add a listener to place a new marker when I click on the map, but nothing appears to happen. I tried having an InfoWindow display on the marker, but since the marker wasn't displaying the InfoWindow showed in the upper-left corner.

I'm using http://maps.googleapis.com/maps/api/js :

function initialize() {
    var mapProp = {
        center: new google.maps.LatLng(45.8590, -122.8158),
        zoom: 9,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
    };
    map = new google.maps.Map(document.getElementById('googleMap'), mapProp);
    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(45.8590, -122.8158),
        animation: google.maps.Animation.DROP,
        map: map,
    });
    google.maps.event.addListener(map, 'click', function(event) {
        placeMarker(event.latLng);
    });
    function placeMarker(location) {
        var subMarker = new google.maps.Marker({
            postion: location,
            map: map,
        })
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

What am I doing wrong?

Answer 1

You have postion: location in new Marker(...) , it should be position .

---

Original Answer:

1. You call function placeMarker(event.latlng); but there are should be two arguments: map and location as in definition. function placeMarker(map, location) { ... } ,

2. event.latlng should be event.latLng .

One of possible solutions could be like this: google.maps.event.addListener(map, 'click', function(event) { placeMarker(map, event.latLng); });

You can see example in documentation .

Answer 2

You have a typo: postion should be position in the MarkerOptions

code snippet:

 function initialize() { var mapProp = { center: new google.maps.LatLng(45.8590, -122.8158), zoom: 9, mapTypeId: google.maps.MapTypeId.ROADMAP, }; var map = new google.maps.Map(document.getElementById('googleMap'), mapProp); var marker = new google.maps.Marker({ position: new google.maps.LatLng(45.8590, -122.8158), animation: google.maps.Animation.DROP, map: map, }); google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); }); function placeMarker(location) { var subMarker = new google.maps.Marker({ position: location, map: map, }); } } google.maps.event.addDomListener(window, 'load', initialize); 

 html, body, #googleMap { height: 100%; width: 100%; margin: 0px; padding: 0px } 

 <script src="https://maps.googleapis.com/maps/api/js"></script> <div id="googleMap"></div>