CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
llanato
llanato

Reputation: 2503

Google Maps V3 Marker not showing

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);
}

Upvotes: 0

Views: 66

Answers (2)

Cristian Greco
Cristian Greco

Reputation: 2606

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
});

Upvotes: 0

geocodezip
geocodezip

Reputation: 161384

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>

Upvotes: 1

Related Questions