Displaying Google Map page via jQuery AJAX_问答_开发者

Displaying Google Map page via jQuery AJAX

开发者 https://www.devze.com 2023-03-10 11:08 出处：网络

Here\'s what 开发者_如何转开发I am trying to do. I am using a jQuery tooltip plug-in called jTip (http://www.codylindley.com/blogstuff/js/jtip/).

Here's what 开发者_如何转开发I am trying to do.

I am using a jQuery tooltip plug-in called jTip (http://www.codylindley.com/blogstuff/js/jtip/).

This plugin effectively loads another page into the tooltip it is displaying.

So I have created another page, which has a small google map in it. The page is nothing special, it just displays a google map with a single marker.

The link to the google map page is written as below.

<a  href="my_ajax_page.php?width=375" class="jTip" id="one" name="This is a tooltip header">Click here!</a>

If I go to this page directly, then the page displays fine. However, via the tooltip plugin, map doesn't show anymore. The map page is as follow.

<!DOCTYPE html>
<html>
  <head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
  <script type="text/javascript">
    function initialize() 
    {
        var latlng = new google.maps.LatLng(35, 101);
        var myOptions = { zoom: 15, center: latlng, 
                          mapTypeId: google.maps.MapTypeId.ROADMAP };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var marker = new google.maps.Marker( { position:latlng, 
                                               map: map, 
                                               animation: google.maps.Animation.DROP });   

    }
  </script>
</head>
<body>
  <div id="map_canvas" style="width:300px;height:300px"></div>
</body>
</html>

Any suggestions on how this could be done?

Make jTip open the new page in an iframe, or make another page which consists of an iframe of the page with the map, and load that page into jTip.

If you don't want to use iframes, then look into Google Maps Asynchronously Loading the Javascript API.

I would suggest using Google Maps API to do this:

http://code.google.com/apis/maps/documentation/javascript/

I successfully implemented this with a jQuery UI at this site:

http://www.exploresouthernindiana.com/wheretosleep.php?s2=servicelink.serviceid%3D4&submit=Submit

You are more than welcome to look at sabramedia.js where the code is interfacing with the Google API.

Note: I didn't design the site. I just setup the map dialog for them.