Databases
StackOverflow2013
Postsdbo
POSwitching a Map using AJAX tabs - Google Maps API
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POSwitching a Map using AJAX tabs - Google Maps API
    primarykey
    data
    text
    <p>I'm trying to setup Google Maps using the Google Maps API v3 JS code. I've got multiple tabs that when clicked open up an AJAXed page of content without reloading the original page. Each tabbed content contains a map. Below is an example of how I've got the map setup. Please note, the list element here is just an example, each tab contains many items that are in different places.</p> <pre><code>&lt;script type="text/javascript"&gt; var locations = new Array(); &lt;/script&gt; &lt;div id="googlemap"&gt;&lt;div&gt;Loading..&lt;/div&gt;&lt;/div&gt; &lt;ul&gt; &lt;li&gt;#1 - My Place, Euless, TX &lt;script type="text/javascript"&gt; locations.push(['#1 - My Place','Euless, TX']); &lt;/script&gt; &lt;/li&gt; &lt;li&gt;#2 - My Other Place, Dallas, TX &lt;script type="text/javascript"&gt; locations.push(['#2 - My Other Place','Dallas, TX']); &lt;/script&gt; &lt;/li&gt; &lt;/ul&gt; &lt;script type="text/javascript"&gt; jQuery(document).ready(function(){ jQuery('#googlemap div').remove(); if(locations.length&gt;0) { var map = new google.maps.Map(document.getElementById('googlemap'), { zoom: 3, center: new google.maps.LatLng(38.065392,-97.382812), mapTypeId: google.maps.MapTypeId.ROADMAP }); var infowindow = new google.maps.InfoWindow(); var marker, i; for (i=0;i&lt;locations.length;i++) { var thelocation = locations[i]; jQuery.ajax({ dataType: 'jsonp', url: 'http://maps.google.com/maps/geo?output=json&amp;oe=utf8&amp;sensor=false&amp;key=BLAHBLAH&amp;q='+thelocation[1], cache: false, success: function(data){ if(data.Status.code==200) { marker = new google.maps.Marker({ position: new google.maps.LatLng(data.Placemark[0].Point.coordinates[1],data.Placemark[0].Point.coordinates[0]), map: map }); google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() { infowindow.setContent(thelocation[0]); infowindow.open(map, marker); } })(marker, i)); } } }); } } }); &lt;/script&gt; </code></pre> <p>I'm currently having a LOT of trouble with destroying the previous map and loading in the new one. When the tabbed content is loaded the map element appears shifted up and to the left. The Google Maps UI still appears in the correct spots, but the map content itself is moved up / left. When dragging the map it moves slightly until a certain point and at that point the visible area gets clipped back to around that same area of view. Can anyone help me that's dealt with loading new maps via AJAX?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USScott Kingsley Clark
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload