SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to display a Google map in a pop-up window?

    Hello,

    I am displaying multiple listings on my site, and for each listing I would like the user to be able to click a link and display a map in a little js pop-up window (example: http://www.simplyhired.com/index.php...90245&sl=save). So not a separate browser window, but a hidden CSS div or whatever.

    Can anyone point me in the right direction?

    Thanks,

    Dave

  2. #2
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK, first take a look at the Google API.

    You'll need to create a map element in your pages, e.g. <div id="map"></div>. Size it accordingly and ensure it's set to an position:absolute and visibility:hidden in your CSS.

    To create the GoogleMap, use JS such as:
    Code:
    // global variables
    var map = document.getElementById("map");
    var mapControl = new GMap2(map);
    
    // add pan/zoom controls to map
    mapControl.addControl(new GLargeMapControl());
    mapControl.addControl(new GScaleControl());
    When the link is clicked, you need to centre the map to the appropriate latitude and longitude then show the DIV in the right place on the page, e.g.
    Code:
    function MapLinkClicked(lat, lng) {
      mapControl.setCenter(new GLatLng(lat,lng), 13); // uses a zoom of 13
      map.style.top = "100px";
      map.style.left = "100px";
      map.style.visibility = "visible";
    Hope that helps.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jan 2006
    Posts
    27
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This worked great! Thanks so much.

    A followup question -- how can I get the x,y coordinates of the link that the user clicked on, so I can popup the window at that location?

    Thanks!

  4. #4
    SitePoint Addict
    Join Date
    Apr 2001
    Location
    Devon, UK
    Posts
    333
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by MetalGod View Post
    how can I get the x,y coordinates of the link that the user clicked
    You can find the absolute X and Y page co-ordinates of your link using something like:

    Code:
    <p><a href="#" onclick="ShowMap(this)">map</a></p>
    
    <script type="text/javascript">
    function ShowMap(e) {
    	var xpos = AbsoluteX(e);
    	var ypos = AbsoluteY(e);
    	alert(xpos+", "+ypos);
    	// now move map to location xpos, ypos
    }
    
    
    // find absolute x co-ordinate of element
    function AbsoluteX(element) {
    	var pos = 0;
    	if (element && typeof element.offsetLeft != 'undefined') {
    		pos = element.offsetLeft;
    		while ((element = element.offsetParent)) pos += element.offsetLeft;
    	}
    	return pos;
    }
    
    
    // find absolute y co-ordinate of element
    function AbsoluteY(element) {
    	var pos = 0;
    	if (element && typeof element.offsetTop != 'undefined') {
    		pos = element.offsetTop;
    		while ((element = element.offsetParent)) pos += element.offsetTop;
    	}
    	return pos;
    }
    </script>
    That will return the absolute co-ordinates of the link on the page. Remember when you're positioning your absolute "map" DIV, the co-ordinates you set are relative to any parent element that is set to relative or absolute.

    But, if your map DIV is the last element on the page and it's not inside any other elements, you'll be fine using the co-ordinates generated above.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •