CODEWITHSUNDEEP
javascriptangularjsgoogle-mapstypescriptng-map
Pak
Pak

Reputation: 2776

Show info window on map loaded with ngmap

I'm using ng-map and typescript. This is my template :

<map on-tilesloaded="showInfoWindow('myInfoWindow')" center="{{model.adresseLatitude}}, {{model.adresseLongitude}}" zoom="15" style="height: 425px">
    <marker id="gmapMarker" on-click="showInfoWindow('myInfoWindow')" position="{{model.adresseLatitude}}, {{model.adresseLongitude}}">
        <info-window id="myInfoWindow">
            <div ng-non-bindable="">
                {{model.adresse}}
            </div>
        </info-window>
    </marker>
</map>

When the map is loaded the infoWindow is shown on the top left of the map but it works fine when the marker is clicked.

I would like that the infowindow open at the right place (on the marker) when the map is displayed.

Upvotes: 1

Views: 1638

Answers (1)

Shaishab Roy
Shaishab Roy

Reputation: 16805

Instead of on-tilesloaded="showInfoWindow('myInfoWindow')" in map directive you can use visible-on-marker="markerID" in <info-window> tag. i.e: <info-window id="myInfoWindow" visible-on-marker="markerID">

like:

<map center="{{model.adresseLatitude}}, {{model.adresseLongitude}}" zoom="15" style="height: 425px">
    <marker id="gmapMarker" on-click="showInfoWindow('myInfoWindow')" position="{{model.adresseLatitude}}, {{model.adresseLongitude}}">
        <info-window id="myInfoWindow" visible-on-marker="gmapMarker">
            <div ng-non-bindable="">
                {{model.adresse}}
            </div>
        </info-window>
    </marker>
</map>

Upvotes: 2

Related Questions