CODEWITHSUNDEEP
javascriptangularjsgoogle-maps
rodling
rodling

Reputation: 998

Markers infowindow in angular

Cant find any documentation on <ui-gmap-markers>, just trying to get very basic

content = "<div><h3>Title</h3>Text here..</div>" added on click when using a lot of markers. All the docs are for singular markers.

$scope.change_type = function(val) {
    content = "<div><h3>Title</h3>Text here..</div>"
    $scope.markers = [] //clears the map
    $scope.markers = Events.venues(val.type)
}

where marker data is like

{options:{ title:"Barney's"},type:'Bar', latitude: 42.992538, longitude: -81.251819}

I have the following in the index.html

<script src='lib/lodash/dist/lodash.js'></script>
<script src='lib/angular-google-maps/dist/angular-google-maps.js'></script>
<script src='lib/addons/markerwithlabel.js'></script>

Upvotes: 0

Views: 585

Answers (1)

egeland
egeland

Reputation: 1304

I hope this can help you - I just figured out how to make use of the ui-gmap-markers today, so excuse any rough edges.. My HTML, which works ok:

<ui-gmap-google-map center='main.map.center' zoom='main.map.zoom' options='main.map.options'>
    <ui-gmap-markers models="main.markers" coords="'self'" icon="'icon'" options="'options'" click="'onClick'" fit="true">
        <ui-gmap-windows show="'showWindow'" closeClick="'closeClick'" ng-cloak>
            <div data-ui-sref="display">                                                                      
                <span data-ng-non-bindable>{{ title }}</span>
            </div>
        </ui-gmap-windows>
    </ui-gmap-markers>
</ui-gmap-google-map>

In my controller, I do:

uiGmapGoogleMapApi.then(function(maps) {
    var markers = [];
    _.each(vm.itemlist,function(item){
        search.getGeometry(item.href).then(function(marker) { // I look up gps coord elsewhere
            marker.id = item.href;
            marker.showWindow = false;
            marker.options    = {
                                 title: item.name,
                                 icon: markericon.normal
                                };
           marker.onClick    = function() { vm.markerClick(marker); };
           marker.closeClick = function() { vm.markerCloseClick(marker); };
           markers.push(marker);
        });         
    });           
    vm.markers = markers;
});

Hope you get some hints from this..

Upvotes: 1

Related Questions