Click here to Skip to main content
15,848,483 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
hi, am using modalpopup in bootstrap, in that div i have binded google maps, first time the map is displaying, second time onwards popup displaying without maps.. . can you help me in this.
java script table design user clicks dynamic table row column one, table id is StatusData user clicks on first column

<td width='10%'><a href='#GMap'> <img src='../../Images/mmap.png'/></a> </td><td class='vid'> <a href='#VDetails'>"+ obj.VID + " </a> </td>
div pop up design using bootstrap

 <div class="remodal" id="GMap" data-remodal-id="GMap">
    <div class="contenttitle2 modal_title">
        <h3>Google Map</h3>
    <div id="port_content">
        <div id="mymodal">
            <div id="map-canvas" style="width: auto; height: 300px;"></div>

jQuery("#GMap").on("open", function () {
        $('#StatusData tbody tr td:nth-child(1)').click(function () {
            var $row = $(this).closest("tr");
            //        alert($row.find(".vid").text());
        var map;
        var latlng = new google.maps.LatLng(5.72144, 100.41659);
        var icon;
        var myOptions = {
            zoom: 16,
            center: latlng
        map = new google.maps.Map(jQuery('#map-canvas')[0], myOptions);
        var marker = new google.maps.Marker({
            position: latlng,
            map: map,
            icon: icon
        google.maps.event.trigger(map, 'resize');

        var infowindow = null;
        infowindow = new google.maps.InfoWindow({
            content: "holding..."

        google.maps.event.addListener(marker, 'mouseover', function () {

            var windowcontent = "test";
  , this);


This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900