Do not load the marker on google-maps

Question

I know he is calling the function correctly, they put the marker does not appear on the map

<script>
    function newMarker(lat, long, id, marker){
            marker = new google.maps.Marker({
                map: map,
                position: new google.maps.LatLng(lat, long)
            });

            alert(id + ' ' + lat + ' ' + long);
            google.maps.event.addListener(marker, 'click', (function(marker, id) {
                return function() {
                    infowindow.setContent('sender');
                    infowindow.open(map, marker);
                }
            })(marker, id));
        }

        $(function() {
            $("#ads tbody tr").each(function(){
                tr=$(this);
                departureLatitude       = tr.children('td:eq(3)').html();
                departureLongitude      = tr.children('td:eq(4)').html();
                destinationLatitude     = tr.children('td:eq(5)').html();
                destinationLongitude    = tr.children('td:eq(6)').html();

                id = tr.children('td:eq(0)').html();

                var marker;
                newMarker(departureLatitude, departureLongitude, id, marker);
                markers.push(marker);
            });

            markerCluster = new MarkerClusterer(map, markers);
        });
</script>

however for that correctly loads the marker of the address entered in the field

<script>
function loadMap(campo, endereco, marker) {
        geocoder.geocode({'address': endereco + ', Brasil', 'region': 'BR'}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    var lat = results[0].geometry.location.lat();
                    var long = results[0].geometry.location.lng();

                    campo.val(results[0].formatted_address);
                    $('#bundle_ad_' + name_campo + 'Latitude').val(lat);
                    $('#bundle_ad_' + name_campo + 'Longitude').val(long);

                    var location = new google.maps.LatLng(lat, long);
                    marker = new google.maps.Marker({
                        map: map,
                        title: 'Seu Destino!'
                        //draggable: true
                    });
                    marker.setPosition(location);
                    map.setCenter(location);
                    map.setZoom(15);
                }
            }
        });
    }

$("#bundle_ad_destination").blur(function () {
        if ($(this).val() != "") {
            loadMap($(this), $(this).val(), marker_destino);
        }
    });
</script>

I do the enstancia the map in this part of the code

<script>
function showGoogleMaps(){
    var mapConfig = {
        zoom: 15, // initialize zoom level - the max value is 21
        center: new google.maps.LatLng(-7.132916, -34.82769),
        streetViewControl: false, // hide the yellow Street View pegman
        scaleControl: true, // allow users to zoom the Google Map
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('googlemaps'), mapConfig);

    setStyleMap();

    getPosicion();
}

google.maps.event.addDomListener(window, 'load', showGoogleMaps);
</script>

the alert put up there to see if they would be carrying informations wrong or empty but alert appears all right, someone help me?

Answer 1

Here is the working code: codepen.io

1. There was a extra quote (") at the end of each cell containing the lng and lat so it was:

   -22.0040705"

instead of

-22.0040705

This lead to NaN in the google.maps.LatLng, which mean the markers wont show

2. You had a listener for window load (probably taken from the gmaps examples), but this event fires after the document ready (handled by jquery), so map in the newMarker() was undefined (next time try to debug with console.log(map). So to solve this I just called showGoogleMaps() in the document ready listener (line 491)

3. You were wrapping the each() function with a statement like

   $(function(){})

which was not right (line 509).

So, once I completed all these steps I've seen the markers on the map.

Hope that helps.