Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You are on the right track. You just need to create a separate global array for your Marker objects and push all created markers to this array. When you write out all your company data to html include a call with the index of the marker executed on click. Below is an example code. I used JSON as my data structure to hold company info instead of XML. </p> <p><div class="snippet" data-lang="js" data-hide="false" data-console="true"> <div class="snippet-code"> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt; &lt;head&gt; &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=yes" /&gt; &lt;meta http-equiv="content-type" content="text/html; charset=UTF-8"/&gt; &lt;title&gt;Google Maps Scroll to Marker&lt;/title&gt; &lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body onload="initialize()"&gt; &lt;div id="map_canvas" style="width: 900px;height: 600px;"&gt;&lt;/div&gt; &lt;div id="companies"&gt;&lt;/div&gt; &lt;script type="text/javascript"&gt; var map; //JSON of company data - equivalent of your XML companies = { "data": [ { "name": "Company 1", "lat": 42.166, "lng": -87.848 }, { "name": "Company 2", "lat": 41.8358, "lng": -87.7128 }, { "name": "Company 3", "lat": 41.463, "lng": -88.870 }, {"name":"Company 4", "lat":41.809, "lng":-87.790} ] } //we will use this to store google map Marker objects var markers=new Array(); function initialize() { var chicago = new google.maps.LatLng(41.875696,-87.624207); var myOptions = { zoom: 9, center: chicago, mapTypeId: google.maps.MapTypeId.ROADMAP } map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); listCompanies(); } function listCompanies() { html = "" //loop through all companies for (i=0;i&lt;companies.data.length;i++) { //get the maker postion lat = companies.data[i].lat lng = companies.data[i].lng //add google maps marker marker = new google.maps.Marker({ map:map, position: new google.maps.LatLng(lat,lng), title: companies.data[i].name }) markers.push(marker); html += "&lt;div onclick=scrollToMarker(" + i + ")&gt;"+companies.data[i].name+"&lt;/div&gt;"; } //display company data in html document.getElementById("companies").innerHTML =html; } function scrollToMarker(index) { map.panTo(markers[index].getPosition()); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> </div> </div> </p> <p>Ok I added another solution for you - uising your code. This one uses your bindInfWindow function to bind the DOM (HTML) click event to open info window and scroll to marker. Please note that because you are loading companies dynamically the divs (or some other tags) that hold their names and ids must exist in the DOM BEFORE you start binding events to it - so the first function you need to execute is the one that renders companies HTML (not the map init). Please note I have not tested this one as I do not have your data..</p> <pre><code>//you must write out company divs first &lt;body onload="showCompanies()"&gt; &lt;script&gt; //JavaScript Document var map; //this is your text data var markers = new Array(); //you need to create your company list first as we will be binding dom events to it so it must exist before marekrs are initialized function showCompanies() { downloadUrl("/ajax/member-xml-output.php?country=BE", function(data) { var xml = data.responseXML; markers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i &lt; markers.length; i++) { var company = markers[i].getAttribute("company"); markerId = "id_"+i; company_list += "&lt;div id="+markerId+"&gt;"+company+"&lt;/div&gt;"; } //display company data in html document.getElementById("company_list").innerHTML = company_list; //now you are ready to initialize map initialize_member_map("lang") }); } function initialize_member_map(lang) { map = new google.maps.Map(document.getElementById("large-map-canvas"), { center: new google.maps.LatLng(50.85034, 4.35171), zoom: 13, mapTypeId: 'roadmap' }); var xml = data.responseXML; var bounds = new google.maps.LatLngBounds(); //your company data was read in and is ready to be mapped for (var i = 0; i &lt; markers.length; i++) { var infoWindow = new google.maps.InfoWindow; var company = markers[i].getAttribute("company"); var address = markers[i].getAttribute("address"); var type = markers[i].getAttribute("type"); var uid = markers[i].getAttribute("uid"); var point = new google.maps.LatLng( parseFloat(markers[i].getAttribute("lat")), parseFloat(markers[i].getAttribute("lng"))); var html = "&lt;b&gt;" + company + "&lt;/b&gt; &lt;br/&gt;" + address; bounds.extend(point); var marker = new google.maps.Marker({ map: map, position: point, uid: uid }); //add the new marker object to the gMarkers array markerId = "id_"+i; bindInfoWindow(marker, map, infoWindow, html,markerId); } map.setCenter(bounds.getCenter()); map.fitBounds(bounds); } function scrollToMarker(index) { map.panTo(markers[index].getPosition()); } function bindInfoWindow(marker, map, infoWindow, html, markerId) { google.maps.event.addListener(marker, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); }); //bind onlcick events to the div or other object in html markerObj = document.getElementById(markerId); //you can create DOM event listeners for the map google.maps.event.addDomListener(markerObj, 'click', function() { infoWindow.setContent(html); infoWindow.open(map, marker); map.panTo(marker.getPosition()); }); } function downloadUrl(url, callback) { var request = window.ActiveXObject ? new ActiveXObject('Microsoft.XMLHTTP') : new XMLHttpRequest; request.onreadystatechange = function() { if (request.readyState == 4) { request.onreadystatechange = doNothing; callback(request, request.status); } }; request.open('GET', url, true); request.send(null); } function doNothing(){ } &lt;/script&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POOpen infoWindow of specific marker from outside Google Maps (V3)
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USAbrar Jahin
    1. USMichal
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. POOpen infoWindow of specific marker from outside Google Maps (V3)
      singulars
      1. PTQuestion
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTAcceptedByOriginator
    3. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks, Michal. I've tried your suggestions, but am stuck on two things, described in the question above. Could you please help? Thanks!
      singulars
      1. PO
      1. USmaartenmachiels
    2. COYou are trying to access marker properties on the array in which you store your xml (text data) not marker objects. Sorry in my script I called my object array markers so hence the confustion. All you need to do is to defaine another array to hold google maps marker object - call it gMarkers and push each marker to it as you create them
      singulars
      1. PO
      1. USMichal
    3. COAfter you do that you need to change the reference of markers to gMarkers in scrollToMarker()
      singulars
      1. PO
      1. USMichal
 

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