How to Use Windows Directive

[dbschwartz]

Hello, I am having trouble implementing the windows (infowindows) directive. I would like to be able to dynamically add HTML as a contentstring to my info windows like so (I am just using this to test):

mainCtrl.js
var contentString = '<div id="content">'+ '<div id="siteNotice">'+ '</div>'+ '<h1 id="firstHeading" class="firstHeading">Uluru</h1>'+ '<div id="bodyContent">'+ '<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' + 'sandstone rock formation in the southern part of the '+ 'Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) '+ 'south west of the nearest large town, Alice Springs; 450&#160;km '+ '(280&#160;mi) by road. Kata Tjuta and Uluru are the two major '+ 'features of the Uluru - Kata Tjuta National Park. Uluru is '+ 'sacred to the Pitjantjatjara and Yankunytjatjara, the '+ 'Aboriginal people of the area. It has many springs, waterholes, '+ 'rock caves and ancient paintings. Uluru is listed as a World '+ 'Heritage Site.</p>'+ '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">'+ 'https://en.wikipedia.org/w/index.php?title=Uluru</a> '+ '(last visited June 22, 2009).</p>'+ '</div>'+ '</div>';

mainCtrl.js

This is my map variable in my controller:

$scope.map = { center : { latitude: 39.752651, longitude: 39.752651 }, zoom : 9, control : {} };

mainCtrl.js
This is my markers array in my controller:

$scope.markers = [{ id: 1, coords: { latitude: 39.752651, longitude: -105.001685 }, options: { label: "test", content: contentString }, show: false, isIconVisibleOnClick: true, closeClick: false }, { id: 2, coords: { latitude: 39.739236, longitude: -104.990251 }, options: { label: "demo", content: contentString }, show: false, isIconVisibleOnClick: true, closeClick: false }];

index.html
and this is what I currently have in my HTML:

<ui-gmap-google-map center="map.center" zoom="map.zoom" control="map.control"> <ui-gmap-markers models='markers' coords="'coords'" options="'options'"> <ui-gmap-windows models="markers" coords="'coords'" show="'show'" templateParameter="'options.content'" isIconVisibleOnClick="'isIconVisibleOnClick'" closeClick="'closeClick'" options='options' ></ui-gmap-windows> </ui-gmap-markers> </ui-gmap-google-map>

After using this code, the contentString is not in the infowindow, it is displayed all over the map and I only see one marker. I also get the following errors:

2 Unable to get gMarker from markersScope!

and

error within chunking iterator: TypeError: b.setClickable is not a function

I made a plunkr, but it doesn't seem to render anything on the page, but it has the error the messages I'm receiving if you look at the console.

Any help would be greatly appreciated. Thanks!!

[plong0]

First, you are not seeing anything in the window because the map does not have a height.

.angular-google-map-container {
    height: 420px;
}

Second, content is being displayed all over the map because you have it embedded in the options object.

Third, you have closeClick: false for your markers, when it is supposed to be a function. You can just leave that attribute off if you don't need a callback for when the window's close button is clicked.

Fourth, when ui-gmap-windows is child of ui-gmap-markers you don't need to set its models and coords attributes - they are inherited from the ui-gmap-markers.

Fifth, isIconVisibleOnClick attribute is already treated as a string literal, so you don't need to include single quotes. (isIconVisibleOnClick="isIconVisibleOnClick") ... same thing for the show="show" attribute. And unless at some time you are going to be setting your isIconVisibleOnClick to false, you can actually just leave it out as it defaults to true (which is to show the marker when the window is open).

I fixed your plunk for you...

PS. your markers are showing in the United States in case you didn't know.