1

Hy i am new to salesforce and I am trying to display the google map in Bootstrap modal when the row is clicked . The modal shows up but google map does not display but when i click on Inspect element Map shows up. If any one can help me why the map is on showing up early when the modal is showing

The code of VF page is given below

<apex:page standardController="Property__c" extensions="PropertyController" standardstylesheets="false" showheader="false" sidebar="false" >

    <html>
        <head>


<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


<style type="text/css">
      html { 
     height: 100% 
     }
body {
     height: 100%;
     margin: 0;
     padding: 0;
     }
#map-canvas {
     height: 450px; 
     width: 550px;
     } 




</style>

<script type="text/javascript" src="https://maps.google.com/maps/api/js" />
<script>
$('tr').on('click', function() {
});
$(document).ready(function() {
$("tr#tr_id").click(function() {
$("#leadID").text($(this).find("td.l_lati").text());
var address = $(this).find("td.l_id").text();
var agent =  $(this).find("td.l_agent").text();
var size =  $(this).find("td.l_size").text();
var status =  $(this).find("td.l_status").text();
var type =  $(this).find("td.l_type").text();
var lat =  $(this).find("td.l_lati").text();
var lng =  $(this).find("td.l_long").text();



        var map;
        var id=1;

google.maps.event.addDomListener(window,'load', initialize(id,lat,lng));

}); 
});


function initialize(id,lat, lng) 
{
var mapOptions ={ center: new google.maps.LatLng(lat, lng),zoom: 13};
map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
loadProperty(id,lat,lng);
}

function loadProperty(id,lat,lng)
{
addMarker(id,lat, lng);
}

function addMarker(id, lat, lng) 
{
var marker = new google.maps.Marker(
{ 
position: new google.maps.LatLng(lat, lng),
map: map,
title:'Hello'
}                              );

google.maps.event.addListener(marker, 'click', function(event) 
{
}
);
}
</script>
</head>


<body>
<nav class="navbar navbar-default">
     <div class="container-fluid">
        <div class="navbar-header">
        <apex:image url="{!URLFOR($Resource.Images, 'Images/RE.jpg')}" width="1340" height="130" />
        </div>

        <div class="navbar-header">
        <a class="navbar-brand" href="https://itroos-dev-ed--seit.na34.visual.force.com/apex/HomePage?core.apexpages.request.devconsole=1">Home</a> 
        </div>

        <div class="navbar-header">
        <a class="navbar-brand" href="#">Property</a>
        </div>

        <div>
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Detail</a></li>
            <li><a href="https://itroos-dev-ed--seit.na34.visual.force.com/apex/propertyInsertCode?core.apexpages.request.devconsole=1">Create</a></li>
          </ul>
        </div>
  </div>
</nav>
            <!-- container -->
        <div class="container">   


  <table class="table table-bordered " id="contacttable">
    <thead>
      <tr>
        <th>Address</th>
        <th>Agent ID</th>
        <th>Size</th>
          <th>Status</th>
          <th>Type</th>
          <th>Latitude</th>
          <th>Longitude</th>
          <th>View Map</th>
      </tr>
    </thead>
    <tbody>
        <apex:repeat value="{!getProperty}" var="pro">
      <tr data-target="#myModal" data-toggle="modal" id="tr_id">
        <td class="l_id" >{!pro.seit__Address__c}</td>
        <td class="l_agent">{!pro.seit__Agent_Name__c}</td>
        <td class="l_size">{!pro.seit__size__c}</td>
        <td class="l_status">{!pro.seit__Status__c}</td>
        <td class="l_type">{!pro.seit__Type__c}</td>
        <td class="l_lati">{!pro.seit__Location__latitude__s}</td> 
        <td class="l_long">{!pro.seit__Location__longitude__s}</td>
          <td><button type="button" class="btn btn-success">View Map</button></td>

      </tr>

        </apex:repeat>
    </tbody>
  </table>


<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">

             <div class="modal-header" id="a">
             <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
             <h4 class="modal-title" id="myModalLabel">Map</h4>
             </div>

              <div class="modal-body" id="b">
                    <div id="map-canvas" style="width: 500px; height: 500px">
                    </div>
              </div>


          <div class="modal-footer" id="c">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
    </div>
  </div>

    </div>



</div>
      <!-- modal popup end -->

</body>
</html>
</apex:page>
  • hey @Sheheri I am trying to replicate your issue can you pls share the record field values(i.e. seit__Address__c, pro.seit__Agent_Name__c, pro.seit__size__c, pro.seit__Status__c, pro.seit__Type__c, pro.seit__Location__latitude__s, pro.seit__Location__longitude__s) – Ratan Paul Dec 30 '15 at 6:57
  • seit__Address__c = Lalazar , seit__Agent__Id = A-00027 , size = 534 , Type = Commercial , LAtitude = 33.7380450 , Longitude = 73.0844880 – Muhammad Sheheryar Afsar Dec 30 '15 at 6:59
1

So I am trying to use your code. Check this below example.

Modify your code based on below example.

<apex:page standardController="Account" standardstylesheets="false" showheader="false" sidebar="false" >

    <html>
        <head>


    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


    <script type="text/javascript" src="https://maps.google.com/maps/api/js" />
    <script>
        var lat =  '18.9750';
        var lng =  '72.8258';
        var map;
        var id=1;
        $(document).ready(function() {
            $("#viewMapId").click(function() {
                setTimeout( function(){google.maps.event.addDomListener(window,'load', initialize(id,lat,lng));} , 400);
            }); 
        });


    function initialize(id,lat, lng) 
    {
        var mapOptions ={ center: new google.maps.LatLng(lat, lng),zoom: 13};
        map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
        loadProperty(id,lat,lng);
    }

    function loadProperty(id,lat,lng)
    {
        addMarker(id,lat, lng);
    }

    function addMarker(id, lat, lng) 
    {
        var marker = new google.maps.Marker(
        { 
            position: new google.maps.LatLng(lat, lng),
            map: map,
            title:'Hello'
        }                              );

        google.maps.event.addListener(marker, 'click', function(event) {
        });
    }
</script>
</head>


<body>

    <button type="button" id="viewMapId" class="btn btn-success" data-toggle="modal" data-target="#myModal">View Map</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
               <div class="modal-header" id="a">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">Map</h4>
               </div>
               <div class="modal-body" id="b">
                    <div id="map-canvas" style="width: 500px; height: 500px">
               </div>
               </div>
              <div class="modal-footer" id="c">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
        </div>
      </div>
    </div>

</body>
</html>
</apex:page>

output

enter image description here

  • map is still not showing in modal but when i go to inspect element map starts loading – Muhammad Sheheryar Afsar Dec 30 '15 at 9:14
  • hey @Sheheri check my updated ans. you need update this. $("#viewMapId").click(function() { setTimeout( function(){google.maps.event.addDomListener(window,'load', initialize(id,lat,lng));} , 400); }); – Ratan Paul Dec 30 '15 at 9:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.