API tools faq
paste
Kenji7761

Google Maps in Dialog with Dynamic Latitude Longitude

Kenji7761
Aug 14th, 2013
192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.40 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Google Map in jQuery dialog box</title>
  6.  
  7. <script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"  type="text/javascript"></script>
  9. <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/jquery-ui.min.js"  type="text/javascript"></script>
  10.  
  11. <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/ui-darkness/jquery-ui.css" />
  12. <style>
  13.     .gBubble
  14.     {
  15.         color:black;
  16.         font-family:Tahoma, Geneva, sans-serif;
  17.         font-size:12px;    
  18.     }
  19. </style>
  20. <script>
  21.     //container to hold gmap object
  22.     var map;
  23.    
  24.     $(document).ready(function()
  25.     {
  26.        
  27.         //define the map dialog box
  28.         $( "#map_container" ).dialog({
  29.             autoOpen:false,
  30.             modal: true,
  31.             width: 555,
  32.             height: 400,
  33.             resizeStop: function(event, ui) {google.maps.event.trigger(map, 'resize')  },
  34.             open: function(event, ui) {
  35.                     //get the encoded form data from the bound information, and deserialize into a hashmap/object
  36.                     formData = QueryStringToHash($(this).data('formData'));
  37.                    
  38.                     //plot a point on the map with the new data
  39.                     plotPoint(formData.lat,formData.lng,formData.title,'<span class="gBubble"><b>'+formData.title+'</b><br>'+formData.desc+'</span>');
  40.                    
  41.                     //resize the map to fix weird grey block bug
  42.                     google.maps.event.trigger(map, 'resize');
  43.                    
  44.                     //set center of the map
  45.                     map.setCenter(new google.maps.LatLng(formData.lat,formData.lng), 10);
  46.             }      
  47.         });  
  48.  
  49.         //runs when the show map button is clicked
  50.         $( "#showMap" ).click(function() {  
  51.             //serialize the data in the parent form of the button and include it for the dialoge to use      
  52.             $( "#map_container" ).data('formData', $(this).closest('form').serialize());  
  53.            
  54.             //open the dialog
  55.             $( "#map_container" ).dialog( "open" );
  56.            
  57.             return false;
  58.         });
  59.  
  60.         $(  "input:submit,input:button, a, button", "#controls" ).button();
  61.         initialize();
  62.        
  63.     });
  64.    
  65.     //plots a single point on the global map object
  66.     function plotPoint(srcLat,srcLon,title,popUpContent,markerIcon)
  67.     {
  68.             //create a latitude longitude point to add to the gmap
  69.             var myLatlng = new google.maps.LatLng(srcLat, srcLon);
  70.            
  71.             //create a marker from the latitude longitude object
  72.             var marker = new google.maps.Marker({
  73.                   position: myLatlng,
  74.                   map: map,
  75.                   title:title,
  76.                   icon: markerIcon
  77.             });
  78.            
  79.            
  80.             //create info window object
  81.             var infowindow = new google.maps.InfoWindow({
  82.                 content: popUpContent
  83.             });
  84.            
  85.             //when marker is clicked, display the info window
  86.             google.maps.event.addListener(marker, 'click', function() {
  87.               infowindow.open(map,marker);
  88.             });                                          
  89.     }
  90.  
  91.     function initialize()
  92.     {      
  93.         //create default latitude longitude
  94.         var latlng = new google.maps.LatLng(0, 0);
  95.        
  96.         //setup map options
  97.         var myOptions = {
  98.           zoom: 10,
  99.           center: latlng,
  100.           mapTypeId: google.maps.MapTypeId.ROADMAP
  101.         };
  102.        
  103.         //create the map
  104.         map = new google.maps.Map(document.getElementById("map_canvas"),  myOptions);                        
  105.     }      
  106.  
  107.     //function for converting URL encoded string into object/hashmmap. Used to deserialize serialized form data.
  108.     function QueryStringToHash(query)
  109.     {
  110.         var query_string = {};
  111.         var vars = query.split("&");
  112.         for (var i=0;i<vars.length;i++)
  113.         {
  114.             var pair = vars[i].split("=");
  115.             pair[0] = decodeURIComponent(pair[0]).replace(/\+/g, ' ');
  116.             pair[1] = decodeURIComponent(pair[1]).replace(/\+/g, ' ');
  117.             // If first entry with this name
  118.             if (typeof query_string[pair[0]] === "undefined")
  119.             {
  120.                 query_string[pair[0]] = pair[1];
  121.                 // If second entry with this name
  122.             }
  123.             else if (typeof query_string[pair[0]] === "string")
  124.             {
  125.                 var arr = [ query_string[pair[0]], pair[1] ];
  126.                 query_string[pair[0]] = arr;
  127.                 // If third or later entry with this name
  128.             }
  129.             else
  130.             {
  131.                 query_string[pair[0]].push(pair[1]);
  132.             }
  133.         }
  134.         return query_string;
  135.     }    
  136. </script>
  137. </head>
  138.  
  139. <body>
  140.     <div id="map_container" title="Location Map">    
  141.         <div id="map_canvas" style="width:100%;height:100%;"></div>
  142.     </div>
  143.    
  144.     <div id="controls">
  145.         <form id="mapTestForm">
  146.             <label for="title">Title:</label> <input type="text" id="title" name="title" value="Custom Point" /><br />
  147.             <label for="desc">Description:</label> <input type="text" id="desc" name="desc" value="Description of Custom points" /><br />
  148.             <label for="lat">Latitude:</label> <input type="text" id="lat" name="lat" value="44.856051" /><br />
  149.             <label for="lng">Longitude:</label> <input type="text" id="lng" name="lng" value="-93.242539" /><br />
  150.             <input type="button" name="showMap" value="Show Map" id="showMap" />
  151.         </form>
  152.     </div>    
  153. </body>
  154. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!