1

I am building a page with 1500+ markers on a Google Map, using the excelent gmaps.js. Something I can't figure out (being a bit of a javascript newb) is how I can display my infoWindow content in a sidebar div outside the Google Map when a marker is clicked. I've found one example here, but I'm having trouble turning that into something that'd work with gmaps.js.

The solution seems to be a javascript function for a click event that would insert the infoWindow data into a div with a specified ID. Here's what I have so far in my script (all the {{}} is from using a Jinja2 template as my website is built with Python/Flask).

<script>
var map = new GMaps({
    el: '#map',
    lat: 39.829140,
    lng: -98.579469,
    zoom: 5
});
{% for port, latt, longg in coords %}
    map.addMarker({icon: "{{ url_for('static', filename='img/icon.png') }}",lat:{{latt}},lng:{{longg}},title:"{{store}}",infoWindow:{content:'<p>{{port}}</p>'}});
{% endfor %}
</script>

So, how can I put the infoWindow into a div outside the map?

Community
  • 1
  • 1
Tyler_1
  • 176
  • 1
  • 2
  • 11
  • Have you tried reading this? http://stackoverflow.com/questions/9078464/google-maps-v3-open-infowindow-from-a-link-outside-of-map?rq=1 – Android Enthusiast Jun 22 '16 at 16:59
  • @d.datul1990 - I did find that one with a previous search but it looks like he's trying to accomplish the reverse somewhat. In their case, a user clicks a link in a sidebar and it opens a marker's infowindow inside the map. I am trying to have a user click a marker in the map and then be presented with information about that marker outside the map - just like the behavior seen in the question linked in my post. My issue is that I'm having trouble figuring out how to adapt that method into my environment, which is using gmaps.js - Thank you for the reply – Tyler_1 Jun 22 '16 at 17:58

0 Answers0