google map display problem in popup window

Question

muralibobby2015 17 Posting Pro

13 Years Ago

hello,

i have to find google co=ordinates from given address. so i am displaying google map in popup box but i don't know why google map not loading in popup. but it is working fine in new page.when i am trying to display in popup then only google map diplaying half. i think it is loading problem of google map in popup. how to solve this issue.

here is my page please check it any one.

http://www.athensys.in/gmap/popuplat.php

Here is the link without pop-up. Its working fine. But above link is not working properly.

http://www.athensys.in/gmap/withoutpop.php

thanks

javascript

Edited 13 Years Ago by muralibobby2015 because: n/a

2 Contributors
3 Replies
1K Views
7 Hours Discussion Span
Latest Post 13 Years Ago Latest Post by Airshow

Airshow 416 WiFi Lounge Lizard

13 Years Ago

Muralikalpana

I have seen this before. Google maps don't initialise properly in a hidden element.

You must ensure that canvas is showing when new google.maps.Map(canvas, options) is called.

Airshow

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

muralibobby2015 17 Posting Pro · Answer 1 · 2011-07-06T14:11:13+00:00

thanks for your reply.

sorry i didnot get you.

here is my code. please tell me where to change

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Find latitude and longitude with Google Maps</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key="
      type="text/javascript"></script>
<script type="text/javascript">

 function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById("map"));
        map.addControl(new GSmallMapControl());
        map.addControl(new GMapTypeControl());
        var center = new GLatLng(48.89364,2.33739);
        map.setCenter(center, 15);

        geocoder = new GClientGeocoder();
        var marker = new GMarker(center, {draggable: true});  
        map.addOverlay(marker);
        document.getElementById("lat").innerHTML = center.lat().toFixed(5);
        document.getElementById("lng").innerHTML = center.lng().toFixed(5);
		

	  GEvent.addListener(marker, "dragend", function() {
       var point = marker.getPoint();
	      map.panTo(point);
       document.getElementById("lat").innerHTML = point.lat().toFixed(5);
       document.getElementById("lng").innerHTML = point.lng().toFixed(5);
	   

        });


	 GEvent.addListener(map, "moveend", function() {
		  map.clearOverlays();
    var center = map.getCenter();
		  var marker = new GMarker(center, {draggable: true});
		  map.addOverlay(marker);
		  document.getElementById("lat").innerHTML = center.lat().toFixed(5);
	   document.getElementById("lng").innerHTML = center.lng().toFixed(5);
	  


	 GEvent.addListener(marker, "dragend", function() {
      var point =marker.getPoint();
	     map.panTo(point);
      document.getElementById("lat").innerHTML = point.lat().toFixed(5);
	     document.getElementById("lng").innerHTML = point.lng().toFixed(5);
		 

        });
 
        });

      }
    }

	   function showAddress(address) {
	   var map = new GMap2(document.getElementById("map"));
       map.addControl(new GSmallMapControl());
       map.addControl(new GMapTypeControl());
       if (geocoder) {
        geocoder.getLatLng(
          address,
          function(point) {
            if (!point) {
              alert(address + " not found");
            } else {
		  document.getElementById("lat").innerHTML = point.lat().toFixed(5);
	   document.getElementById("lng").innerHTML = point.lng().toFixed(5);
	  
		 map.clearOverlays()
			map.setCenter(point, 14);
   var marker = new GMarker(point, {draggable: true});  
		 map.addOverlay(marker);

		GEvent.addListener(marker, "dragend", function() {
      var pt = marker.getPoint();
	     map.panTo(pt);
      document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
	     document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
		
        });


	 GEvent.addListener(map, "moveend", function() {
		  map.clearOverlays();
    var center = map.getCenter();
		  var marker = new GMarker(center, {draggable: true});
		  map.addOverlay(marker);
		  document.getElementById("lat").innerHTML = center.lat().toFixed(5);
	   document.getElementById("lng").innerHTML = center.lng().toFixed(5);
      
	 GEvent.addListener(marker, "dragend", function() {
     var pt = marker.getPoint();
	    map.panTo(pt);
    document.getElementById("lat").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lng").innerHTML = pt.lng().toFixed(5);
	   
        });
 
        });

            }
          }
        );
      }
    }
    </script>
	<style type="text/css">
	.popup_table tr td{
border:1px solid #ccc;
background-color:#fff;

}

	
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script>

$(document).ready(function() {	

	//select all the a tag with name equal to modal
	$('a[name=modal]').click(function(e) {
		//Cancel the link behavior
		e.preventDefault();
		
		//Get the A tag
		var id = $(this).attr('href');
	
		//Get the screen height and width
		var maskHeight = $(document).height();
		var maskWidth = $(window).width();
	
		//Set heigth and width to mask to fill up the whole screen
		$('#mask').css({'width':maskWidth,'height':maskHeight});
		
		//transition effect		
		$('#mask').fadeIn(1000);	
		$('#mask').fadeTo("slow",0.8);	
	
		//Get the window height and width
		var winH = $(window).height();
		var winW = $(window).width();
              
		//Set the popup window to center
		$(id).css('top',  winH/2-$(id).height()/2);
		$(id).css('left', winW/2-$(id).width()/2);
	
		//transition effect
		$(id).fadeIn(2000); 
	
	});
	
	//if close button is clicked
	$('.window .close').click(function (e) {
		//Cancel the link behavior
		e.preventDefault();
		
		$('#mask').hide();
		$('.window').hide();
	});		
	
	//if mask is clicked
	$('#mask').click(function () {
		$(this).hide();
		$('.window').hide();
	});			
	
});

</script>
<style>
body {
font-family:verdana;
font-size:15px;
background-color:#ccc;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
  position:absolute;
  left:0;
  top:0;
  z-index:9000;
 
  display:none;
}
  
#boxes .window {
  position:absolute;
  left:0;
  top:0;
  width:500px;
  height:300px;
  display:none;
  z-index:9999;
  padding:20px;
}

#boxes #dialog {
  width:500px; 
  height:350px;
  padding:10px;
  background-color:#ffffff;
}



</style>
</head>
<body onload="load()" onunload="GUnload()">
<ul>

<li><a href="#dialog" name="modal" id="showMap" onclick="load()">Simple Window Modal</a></li>

</ul>
<table>
<tr>
<td><input type="text" name="lat" id="lati" value="" /></td>
<td><input type="text" name="lang" id="lang" value="" /></td>
</tr>
</table>
<div id="boxes">

<div id="dialog" class="window">
Simple Modal Window | 
<a href="#"class="close"/>Close it</a>

<table width="50%" border="0" cellspacing="0" cellpadding="5" style="border:1px solid #eddfaf; background-color:#F9F4E2;">
  <tr>
    <td><form action="#" onsubmit="showAddress(this.address.value); return false">
       
	   
	   <table width="100%" cellpadding="3" cellspacing="0"  bgcolor="#eddfaf">
  <tr>
    <td><input type="text" size="50" name="address" value="3 cit&eacute; Nollez Paris France" /></td>
    <td> <input type="submit" value="Search!" /></td>
  </tr>
</table>

          
         
      
      </form></td>
  </tr>
  <tr>
    <td> 
      <table  width="420" cellpadding="2" cellspacing="0"  bgcolor="#eddfaf">
	  <tr><td colspan="2"></td></tr>
        <tr>
          <td align="center"><b>Latitude</b></td>
          <td align="center"><b>Longitude</b></td>
        </tr>
        <tr>
          <td id="lat"></td>
          <td id="lng"></td>
        </tr>
      </table>
      
    </td>
  </tr>
  <tr>
    <td> 
      <div align="center" id="map" style="width: 480px; height: 200px"><br/>
      </div>
      <a href="show_points();">Like it</a>
    </td>
  </tr>
</table>
</div>
</div>
</body>
</html>

Airshow 416 WiFi Lounge Lizard Team Colleague · Answer 2 · 2011-07-06T14:27:45+00:00

You are using the Google Maps Javascript API Version 2, which is now officially deprecated by Google.

You should be using the API Version 3, however the same principle applies - don't initialise the map in a hidden element.

Airshow