CODEWITHSUNDEEP
htmlangulargoogle-mapsgoogle-maps-api-3sweetalert2
Sameera Manorathna
Sameera Manorathna

Reputation: 618

Angular Google map is not displayed when it is placed within sweetalert2 popup

I am trying to display a google map segment is a popup area using sweetalert2. The same HTML code segment provided in the below sweetalert2 function works when it is pasted in the HTML page itself. But not in the alert.

export function showGoogleMap() {
    swal({
        title: 'HTML <small>125</small>!',
        html: '<div style="width: 100%; height:500px;"><agm-map style="height: 300px;" [latitude]="51.678418" [longitude]="7.809007">\n' +
        '<agm-marker [latitude]="51.678418" [longitude]="7.809007"></agm-marker></agm-map></div>',
        width: '800px'
    });
}

Only an empty area will be displayed there. Check the below image., but not in the alert box. You could see the Map is working in the HTML What is the wrong thing that I am doing here?

enter image description here

Upvotes: 0

Views: 261

Answers (1)

evan
evan

Reputation: 5701

It looks like this library doesn't support angular code in HTML and hence your map inside the alert is not being rendered at all. See Using sweetalert 2 with custom html and AngularJS

This may be an alternative https://github.com/sweetalert2/ngx-sweetalert2

Hope this helps!

Upvotes: 1

Related Questions