How do I implement clickable windows on markers using Angular Google Maps?

Question

I have tried this every-which-way and still no luck. Please bear with me, I am a designer by trade.

I have created a Plunker of where I am so far.

I am using Angular Google Maps to create a map upon which I would like to output my markers, clicking one of which will open its info-window. Within each info window I would like to have some interactive content e.g. buttons, links, marching bands etc

My problem is multi-faceted:

1. When I place the info window html inside the tag none of the variables are displayed unless a ng-non-bindable is placed on a parent. However, I want the content to be interactive. As you will see in my code, the button does nothing.

   <ui-gmap-windows show="show">
       <div class="markerwindow" ng-non-bindable>
           <h1>{{ title }}</h1>
           <p>{{ message }}</p>
           <footer>
               <a href="http://foo-bar.com">Google</a>
               <button click="buttonClick(id)">Button</button>
           </footer>
       </div>
   </ui-gmap-windows>
   

2. I cannot separate the template out into a separate file [I expect the info window to end up being pretty significant] using templateUrl on the without this error:

   "Possibly unhandled Error: error within chunking iterator: Error: [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!"

   <ui-gmap-windows show="show" templateUrl="templates/window.html">
   </ui-gmap-windows>
   

3. Finally, I weep to myself sometimes when I read documentation...

Could someone help me identify the issues with my approach? I would really appreciate even a flake of help because I'm really struggling to see a way over this obstacle at the moment.

Thanks in advance.

Answer 1

The templateURL attribute is a property on your marker object. Here is some code I'm currently working on:

function createMarkers(data) {
  $scope.markers = data.map(function(marker){
    var tags = marker.tags.map(function(tag){
      return {
        tag: tag.tag,
        url: tag.url
      }
    })
    return ({
      id: marker.id,
      latitude: marker.position.lat,
      longitude: marker.position.lng,
      info: {
        title: marker.item,
        description: marker.note,
        place: marker.position.place,
        tags: tags
      },
      template: "views/partials/main/gmapWindow.html"
    })
  })
}

As you can see I have a property named template that contains an url to a template (partials might not be the best naming...). Also note that I have a property called info that contains stuff like title and description.

My ui-gmap-google-map-directive looks like this:

<ui-gmap-google-map center='map.center' zoom='map.zoom'>
  <ui-gmap-markers models="markers" coords="'self'" icon="'icon'">
    <ui-gmap-windows
      templateUrl="'template'"
      templateParameter="'info'"
      show="'showWindow'"
      closeClick="'closeClick'"
    ></ui-gmap-windows>
  </ui-gmap-markers>
</ui-gmap-google-map>

Note that I use both " as well as ' in templateUrl and templateParameter. templateUrl is the property that contains a string to a template (this way we can use different template for different markers) and templateParameter is also a property in the markers-model. That property contains an object that we pass into the template.

Finally we can create our template and access the object that we passed into it, in my case the info-object that where a property on the model.

<div>
    <h3>{{ :: parameter.title }}</h3>
    <p><em>{{ :: parameter.description }}</em></p>
    <p><strong>{{ :: parameter.place }}</strong></p>
    <p class="muted">Tags: <tags marker="{{ :: parameter.tags }}" /></p>
</div>

Oh, and I weep as well when reading the documentation...