1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

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