google map display problem in popup

Question

muralibobby2015 17 Posting Pro

12 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 i am getting this issue.

here is my page please check it any one.

<!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=GOOGLE API 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);
		document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").innerHTML = pt.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);
	   document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").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);
	   document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").innerHTML = pt.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);
		 document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").innerHTML = pt.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);
	   document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").innerHTML = pt.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);
		 document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").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);
       document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").innerHTML = pt.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);
	   document.getElementById("lati").innerHTML = pt.lat().toFixed(5);
	   document.getElementById("lang").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:440px;
  height:200px;
  display:none;
  z-index:9999;
  padding:20px;
}

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



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

<li><a href="#dialog" name="modal" id="showMap">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>
<script type="text/javascript">
load();
</script>
<table width="100%" 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: 480px"><br/>
      </div>
      <a href="show_points();">Like it</a>
    </td>
  </tr>
</table>
</div>
</div>
</body>
</html>

php

3 Contributors
6 Replies
220 Views
22 Hours Discussion Span
Latest Post 12 Years Ago Latest Post by diafol

All 6 Replies

pritaeas 2,194 ¯\_(ツ)_/¯

12 Years Ago

What works, and what doesn't ? Any javascript errors ? Is something showing, or nothing at all ? Do you have it online for use to see ?

diafol

12 Years Ago

It may be a z-index issue. Place the map z-index at the very front. Check the z-index of the popup elements (CSS)

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-05T21:29:57+00:00

Thanks for the reply. Here is my online link. When you click "click here link" it displays a pop-up window with google map but google map is not displaying properly in the canvas. It is showing only small portion of the map. Can anyone please find where the problem lies. It may be loading problem of google map when we click on the link. Why bcoz the same code is working fine without pop-up. But not sure on this... see the link below.

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 in advance.

diafol · Answer 2 · 2011-07-05T22:09:54+00:00

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

you limit the box size to 500px, but the content (map, form etc comes to a total of about 600px).

In your non-popup you use a height of 200px:

<div align="center" id="map" style="width: 420px; height: 200px"><br/> 
      </div>

If you change the hard-coded height in the popup to the same you see this:

muralibobby2015 17 Posting Pro · Answer 3 · 2011-07-06T11:29:55+00:00

thanks ardav. i changed height as you said. i think it is not the problem.
see this link http://www.athensys.in/gmap/popuplat.php

when click on this link for popup google map displaying half only. when you drag that map once its loading fully. just drag it once you see where the problem is..

and also drag the marker even latitude and logitude values not changing.

thanks

diafol · Answer 4 · 2011-07-06T12:51:00+00:00

Hmm. Odd.

Any js clashes maybe? Check the ids and classnames for potential clashes.

Anyway, perhaps you'll get more joy in the js forum. I can't see how this is php-related.

google map display problem in popup

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers