ansaurus

Question

How do I fix drag and drop for a Google map (v2) inside a JQuery Dialog (1.4.2, 1.8.5)?

Answer 1

+1 A:

This works correctly with Google Maps Api v3. (version 2 is deprecated). Below is code for v3 Maps Api

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"&gt;&lt;/script&gt;

    <script language="javascript" type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt;

    <style type="text/css"> .ui-dialog { border:8px solid #ccc; } .ui-dialog-titlebar { border-bottom: 2px solid #ccc; padding: 4px; } .ui-dialog-titlebar a { display: none; } </style>

  </head>

  <body>

    <a href="#" class="modal">Open modal</a>

    <a href="#" class="open">Open non-modal</a>



    <div id="popup" style="display:none;text-align:left;padding: 4px;overflow:hidden">

      <div id="map" class="map" style="width:400px;height:300px;"></div>

    </div>

    <script type="text/javascript">

      $(function(){

        $(".modal").click(function(){

          $("#popup").dialog({ modal:$(this).hasClass("modal"), // changing to false works ok

                               title:"Drag marker", width:450, position: "center", 
                               dragStart: function(e, ui) { e.stopPropagation() },

                               buttons: { "Cancel": function(){ $(this).dialog("close"); } },

                               open: function() {

                                var myLatlng = new google.maps.LatLng(-34.397, 150.644);
  var myOptions = {
    zoom: 8,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map"), myOptions);



                                      var marker = new google.maps.Marker({
      position: myLatlng, 
      map: map, 
      draggable:true,
      title:"Hello World!"
  });   



                                     }

                              });

        });

      });

    </script>

  </body>

</html>

Michal 2010-10-18 11:16:25

Good to know, but for various reasons, I'm stuck on v2 for now...

Tom 2010-10-18 21:23:49

I also tried various z-index settings (as per the post you quoted) for this with v2. It seems like jQuery interferes with map events (even if the map container is outside the dialog div). If you want it this to work in a modal box you might have to roll your own. (http://foohack.com/tests/vertical-align/dialog.html)

Michal 2010-10-18 22:23:54

ansaurus

tags:

views:

answers:

How do I fix drag and drop for a Google map (v2) inside a JQuery Dialog (1.4.2, 1.8.5)?

related questions