{"action":"closed","issue":{"url":"https://api.github.com/repos/primefaces/primeng/issues/1055","repository_url":"https://api.github.com/repos/primefaces/primeng","labels_url":"https://api.github.com/repos/primefaces/primeng/issues/1055/labels{/name}","comments_url":"https://api.github.com/repos/primefaces/primeng/issues/1055/comments","events_url":"https://api.github.com/repos/primefaces/primeng/issues/1055/events","html_url":"https://github.com/primefaces/primeng/issues/1055","id":182407359,"number":1055,"title":"p-gmap component shows a grey map","user":{"login":"jaurakunal","id":12739201,"avatar_url":"https://avatars.githubusercontent.com/u/12739201?v=3","gravatar_id":"","url":"https://api.github.com/users/jaurakunal","html_url":"https://github.com/jaurakunal","followers_url":"https://api.github.com/users/jaurakunal/followers","following_url":"https://api.github.com/users/jaurakunal/following{/other_user}","gists_url":"https://api.github.com/users/jaurakunal/gists{/gist_id}","starred_url":"https://api.github.com/users/jaurakunal/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jaurakunal/subscriptions","organizations_url":"https://api.github.com/users/jaurakunal/orgs","repos_url":"https://api.github.com/users/jaurakunal/repos","events_url":"https://api.github.com/users/jaurakunal/events{/privacy}","received_events_url":"https://api.github.com/users/jaurakunal/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":10,"created_at":"2016-10-12T00:32:50Z","updated_at":"2016-10-12T13:19:37Z","closed_at":"2016-10-12T13:19:37Z","body":"Hi,\r\nI'm using the p-gmap component to plot a few addresses on the map. The Component loads but shows a grey square in the view instead of the plotted addresses. Here's the code I'm using.\r\n\r\n**HTML**\r\n```\r\n<div class=\"w-section w-clearfix\">\r\n    <div class=\"w-section w-clearfix address-popup\">\r\n        <div class=\"list-group address-list\">\r\n            <a *ngFor=\"let item of addressList; let i = index\" href=\"#\" class=\"list-group-item list-group-item-action\" (click)=\"handleAddressSelected(i)\">\r\n                <h5 class=\"list-group-item-heading\">{{item.strAddr1 + (item.strAddr2 != null ? \" \" + item.strAddr2 : \"\")}}</h5>\r\n                <p class=\"list-group-item-text\">{{item.city + \" \" + item.state}}</p>\r\n                <p class=\"list-group-item-text\">{{item.country + \" \" + item.zipcode}}</p>\r\n            </a>\r\n        </div>\r\n        <div class=\"address-map\">\r\n            <p-gmap [style]=\"{'width':'100%','height':'310px'}\" [options]=\"mapOptions\" [overlays]=\"mapOverlays\"></p-gmap>\r\n        </div>\r\n    </div>\r\n</div>\r\n```\r\n**Component Code**\r\n```\r\nimport {Component, Input, EventEmitter, OnDestroy, OnInit, OnChanges, SimpleChanges} from \"@angular/core\";\r\nimport {IAddress} from \"../../../profile/address.model\";\r\n\r\ndeclare var google: any;\r\n\r\n@Component({\r\n    moduleId: module.id,\r\n    selector: 'pf-address-list',\r\n    templateUrl: 'addressList.html',\r\n    outputs: ['pfAddressSelected'],\r\n    styleUrls: ['address.css']\r\n})\r\n\r\nexport class AddressListComponent implements OnInit, OnDestroy, OnChanges {\r\n    LOGGER_CLASS:string = \"AddressListComponent\";\r\n    @Input('pfList') addressList:Array<IAddress>;\r\n    response:JSON;\r\n    error:JSON;\r\n    pfAddressSelected:EventEmitter<IAddress>;\r\n    mapOptions:any;\r\n    mapOverlays:Array<any>;\r\n\r\n    constructor() {\r\n        this.pfAddressSelected = new EventEmitter();\r\n        this.mapOverlays = new Array();\r\n    }\r\n\r\n    /**\r\n     * In this function we init the map parameters\r\n     */\r\n    ngOnInit(): void {\r\n        if(navigator.geolocation) {\r\n            navigator.geolocation.getCurrentPosition(this.setCurrentPosition.bind(this));\r\n        } // End of if(navigator.geolocation)\r\n    } // End of ngOnInit\r\n\r\n    /**\r\n     * This function clears the address list\r\n     */\r\n    ngOnDestroy(): void {\r\n        this.addressList = null;\r\n    } // End of ngOnDestroy\r\n\r\n    /**\r\n     * Once the list has been set from the parent, this is where we create the overlay for the map\r\n     * @param changes\r\n     */\r\n    ngOnChanges(changes: SimpleChanges): void {\r\n        if(this.addressList) {\r\n            for(let i = 0; i < this.addressList.length; i++) {\r\n                let addr:IAddress = this.addressList[i];\r\n                this.mapOverlays.push(new google.maps.Marker({position: {lat: addr.latitude, lng: addr.longitude}, title: i}));\r\n            } // End of for(let i = 0; i < this.addressList.length; i++)\r\n        } // End of if(this.addressList)\r\n    } // End of ngOnChanges\r\n\r\n    /**\r\n     * This function covers the flow after the user has selected an address\r\n     * @param index\r\n     */\r\n    handleAddressSelected(index:string):void {\r\n        let address:IAddress = this.addressList[index]\r\n        this.pfAddressSelected.emit(address);\r\n    } // End of handleAddressSelected\r\n\r\n    /**\r\n     * This function sets the current coordinates\r\n     * @param position\r\n     */\r\n    setCurrentPosition(position) {\r\n        this.mapOptions = {\r\n        center: {lat: position.coords.latitude, lng: position.coords.longitude},\r\n            zoom: 12\r\n        };\r\n    } // End of setCurrentPosition\r\n} // End of export class AddressListComponent\r\n```\r\n\r\n**CSS**\r\n```\r\n.address-popup {\r\n    float: left;\r\n    display: flex;\r\n    width: 100%;\r\n}\r\n.address-list {\r\n    position: relative;\r\n    width: 40%;\r\n}\r\n\r\n.address-map {\r\n    position: relative;\r\n    width: 60%;\r\n}\r\n\r\n.address-map-block {\r\n    width: 100%;\r\n    height: 310px;\r\n}\r\n```\r\n\r\nAny help on this would be much appreciated.\r\nCheers\r\nKunal"}}
{"actor":{"display_login":"jaurakunal"}}