Google Map with several markers are not displayed

Discussion in 'JavaScript' started by mstdmstd, Sep 29, 2019.

  1. #1
    Hello,
    In laravel 5.8 app I add Google Map with several markers and I have empty block and no errors in console
    and no map acttually is visible
    In function with code:



    frontendTimeline.prototype.initEventsListingMap = function () {
    
        console.log("this_mapEvents::")
        console.log( this_mapEvents )
    
        $("#div_map_wrapper").css("display","block")
    
        var map = new google.maps.Map(document.getElementById('div_map'), {
            zoom: 12,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.SATELLITE, google.maps.MapTypeId.ROADMAP, google.maps.MapTypeId.HYBRID]
            },
            mapTypeId: google.maps.MapTypeId.ROADMAP,
        });
    
        this_mapEvents.map((mapEvent,index) => {
    
            if ( typeof mapEvent.longitude != "undefined" && mapEvent.longitude != null && typeof mapEvent.latitude != "undefined" && mapEvent.latitude != null ) {
                console.log("INSIDE map::")
                console.log( map )
    
                var markerPosition = {lat: parseFloat(mapEvent.latitude), lng: parseFloat(mapEvent.longitude)};
                var infowindow = new google.maps.InfoWindow({
                    content: mapEvent.event_name + ": <strong>" + mapEvent.event_start_date + "-" + mapEvent.event_end_date + "</strong>"
                });
    
                var marker = new google.maps.Marker({
                    position: markerPosition,
                    draggable: false,
    
                    map: map
                });
                google.maps.event.addListener(marker, 'mouseover', function () {
                    infowindow.open(map, marker);
                });
            } // if ( typeof mapEvent.longitude != "undefined" && mapEvent.longitude != null && typeof mapEvent.latitude != "undefined" && mapEvent.latitude != null ) {
    
        });
    
    
    Code (JavaScript):


    live : https://www.votes.my-demo-apps.tk/events-timeline
    in console it is visible that 2 markers are added .

    I have a very similar page with 1 marker https://www.votes.my-demo-apps.tk/event/rest-on-the-lake
    which works ok.
    Why error in first case and how to fix it ?

    Thanks!
     
    mstdmstd, Sep 29, 2019 IP
  2. mstdmstd

    mstdmstd Well-Known Member

    Messages:
    130
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    123
    #2
    Sorry, no ideas why map is emoty ?
     
    mstdmstd, Sep 30, 2019 IP