"Uncaught TypeError: Failed to execute 'getComputedStyle' on 'Window': parameter 1 is not of type 'Element'.Tq @ VM107:37mF , when gmap is adding

Question

I am newbie, practicing html and jquery. Could any one please help me resolving this error? when i was try to add google map dynamically, i was getting an error like Uncaught typeError: failed to execute 'getComputedStyle' on 'window': parameter.

html markup is:

<type="submit" id="locate">Find me</button>
<div id="gmap"> </div>

enter code here

    $(document).ready(function () {

        $('#locate').on('click', function (e) {
            e.preventDefault();
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(showPosition);
            }
            else {
                console.log('Geolocation is not supported by your browser');
            }
        });
        var latlng,
         mapOptions,
         map;

        showPosition = function (position) {
            latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude)
            mapOptions = {
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
                zoom: 15
            }
            Map = new google.maps.Map($('#gmap'), mapOptions);
            var marker = new google.maps.Marker({
                position: latlng,
                map: map,
                title: "You are here"
            })
       }
    });

Answer 1

Two issues:

1. JavaScript is case-sensitive, this line:

   Map = new google.maps.Map
   

   should be

   map = new google.maps.Map
   

   (Note the lower case m in the map at the beginning.)

   So why weren't you getting an "undefined variable" error or something? Because of The Horror of Implicit Globals. Consider using strict mode so you get proactive notifications instead.

2. The google.maps.Map constructor expects you to give it an element as its first argument, but you're not doing that. You're giving it a jQuery object:

   map = new google.maps.Map($('#gmap'), mapOptions);
   //                        ^^^^^^^^^^--- this is a jQuery object
   

   To get the only element inside the jQuery object, use [0]:

   map = new google.maps.Map($('#gmap')[0], mapOptions);
   // Here ----------------------------^^^