未捕获的类型错误：google.maps.infoWindow 不是构造函数

Question

While trying to implement a google maps marker I've got this error and just couldn't get rid of it.

The error:

Uncaught TypeError: google.maps.infoWindow is not a constructor

at addMarker (functions.js:25)
at window.onload (functions.js:36)

My code:

window.onload = function(){
    var map;

    function initialize(){
        var mapProp = {
            center: new google.maps.LatLng(-27.648598,-48.577423),
            scrollwheel: false,
            zoom: 14,
            mapTypeId:google.maps.MapTypeId.SATELLITE
        }   

        map = new google.maps.Map(document.getElementById("mapa"),mapProp);
    }

    function addMarker(lat,long,icon,content){
        var latLng = {'lat':lat,'lng':long};

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

        var infoWindow = new google.maps.infoWindow({
            content:content,
            maxWidth:200,
            pixelOffSet: new google.maps.Size(0,20)
        });

        infoWindow.open(map,marker);
    }


    initialize();
    addMarker(-27.616637,-48.5923228,'','address');
}

Answer 1

You have a typo in your code. JavaScript is case sensitive, InfoWindow in the constructor should be capitalized; google.maps.infoWindow is not the same as google.maps.InfoWindow

Working Code snippet:

 window.onload = function(){ var map; function initialize(){ var mapProp = { center: new google.maps.LatLng(-27.648598,-48.577423), scrollwheel: false, zoom: 14, mapTypeId:google.maps.MapTypeId.SATELLITE } map = new google.maps.Map(document.getElementById("mapa"),mapProp); } function addMarker(lat,long,icon,content){ var latLng = {'lat':lat,'lng':long}; var marker = new google.maps.Marker({ position:latLng, map:map, icon:icon }); var infoWindow = new google.maps.InfoWindow({ content:content, maxWidth:200, pixelOffSet: new google.maps.Size(0,20) }); infoWindow.open(map,marker); } initialize(); addMarker(-27.616637,-48.5923228,'','address'); }

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

 <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script> <div id="mapa"></div>