html5 - How to put a map infowindow using html and angularjs -
hello newbie html , angularjs, making dmeo on google maps markers,i got marker on map,but want put infowindow on marker ,i have searched many things not fit in scenario,so me how put infowindow on map marker,my code below. html
<div class="mapclass"> <ons-row class="app-map"> <ons-col> <map center="[{{lat}}, {{lng}}]"> <marker ng-model position="[{{lat}}, {{lng}}]" title= "{{tittle}}" animation="animation.bounce" visible="true" ></marker> </map> </ons-col> </ons-row> </div> js
app.controller('listingdetailcontroller', function ($http, $scope, $compile, $filter, $sce,$timeout) { var searchtxt = 'cay'; var url = encodeuri("http://www.yahoo.com"); var page = gallery.getcurrentpage(); var fkcategory = page.options.params; var lat=''; var lng = ''; var img = ''; var share = ''; var title = ''; var phone = ''; var web = ''; var email = ''; var about=''; var help=''; var info=''; var service=''; $timeout(callattimeout, 1000); function callattimeout() { console.log("timeout occurred"); share = $scope.share; // console.log("===iside details======"+fkcategory); $scope.img = "http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/papagallo1438959641.jpg"; $http({ method: 'post', url: api_host+'/webservice/listingdetail', headers: { 'content-type': 'application/x-www-form-urlencoded', 'caymanauth': caymanauth }, data: "&catid=" + fkcategory + "&searchtxt=" + searchtxt, contenttype: 'application/x-www-form-urlencoded' }).success(function (data) { var i; var content = ' '; (i = 0; i<data['details'].length; i++) { lat = + data['details'][i]['varlatitude']; lng = + data['details'][i]['varlongitude']; img = data['details'][i]['varcompanylogo']; title = data['details'][i]['vartitle']; about= data['details'][i]['vardescbusiness']; help= data['details'][i]['varmetadescription']; info= data['details'][i]['varspecials']; service= data['details'][i]['vardescbusiness']; share = data['details'][i]['varfacebooklink']; $scope.about = about; $scope.help = help; $scope.info = info; $scope.service = service; $scope.title = title; $scope.photo = ("http://caymanafterwork.netcluesdemo.com/cache/business/images/337_224/"+img); $scope.lat = lat; $scope.lng= lng; $scope.geo = { lat: lat, lng: lng }; $scope.phone= data['details'][i]['varphone']; $scope.web= data['details'][i]['varwebsitelink']; $scope.email= data['details'][i]['varbusinessemail']; phone = $scope.phone; web = $scope.web; email = $scope.email; share = $scope.share; if (content === ' ') { content = '<ons-list class="list ons-list-inner" style="border-top: none;">' + '<ons-list-item class="list__item ons-list-item-inner">'+ '<ons-row class="detail-row row ons-row-inner">'+ '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ '<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner">'+ '<div class="desc">'+ data['details'][i]['varcityname']+'</div>'+ '</ons-col>'+ '</ons-row>'+ '</ons-list-item>'+ '<ons-list-item class="list__item ons-list-item-inner">'+ '<ons-row class="detail-row row ons-row-inner">'+ '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ '<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner">'+ '<div class="desc">'+ data['details'][i]['varphysicaladdress'] + '</div>'+ '</ons-col> '+ '</ons-row>'+ '</ons-list-item>'+ '<ons-list-item class="list__item ons-list-item-inner">'+ '<ons-row class="detail-row row ons-row-inner">'+ '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ '<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+ '</ons-icon>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner">'+ '<div class="desc">' + data['details'][i]['varpoboxaddress']+'</div>'+ '</ons-col>'+ '</ons-row>'+ '</ons-list-item>'+ '</ons-list>'+ '<div class=caw-botton>'+ '<ons-row class="row ons-row-inner">'+ '<ons-col class="col ons-col-inner" onclick=gallery.pushpage("book-page.html");>'+ '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #fff;">'+ '<i class="ion-compose">'+'</i>book now</div>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner" onclick=gallery.pushpage("review.html");>'+ '<div style="padding: 12px 0; background: #cccccc; color: #fff;">'+ '<i class="ion-edit">'+ '</i>write review</div>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner" onclick=gallery.pushpage("email-friend.html");>'+ '<div style="padding: 12px 0; background: #0ad046; color: #fff;">'+ '<i class="ion-ios-email">'+ '</i>email-friend</div>'+ '</ons-col>'+ '</ons-row>'+ ' </div>'; } else { '<ons-list class="list ons-list-inner" style="border-top: none;">' + '<ons-list-item class="list__item ons-list-item-inner">'+ '<ons-row class="detail-row row ons-row-inner">'+ '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ '<ons-icon fixed-width="true" icon="fa-map-marker" class="ons-icon fa-map-marker fa fa-lg">'+'</ons-icon>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner">'+ '<div class="desc">'+ data['details'][i]['varcityname']+'</div>'+ '</ons-col>'+ '</ons-row>'+ '</ons-list-item>'+ '<ons-list-item class="list__item ons-list-item-inner">'+ '<ons-row class="detail-row row ons-row-inner">'+ '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ '<ons-icon fixed-width="true" icon="ion-home" class="ons-icon ons-icon--ion ion-home fa-lg"></ons-icon>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner">'+ '<div class="desc">'+ data['details'][i]['varphysicaladdress'] + '</div>'+ '</ons-col> '+ '</ons-row>'+ '</ons-list-item>'+ '<ons-list-item class="list__item ons-list-item-inner">'+ '<ons-row class="detail-row row ons-row-inner">'+ '<ons-col width="30px" style="flex: 0 0 30px; max-width: 30px; -moz-box-flex: 0;" class="col ons-col-inner">'+ '<ons-icon fixed-width="true" icon="ion-soup-can" class="ons-icon ons-icon--ion ion-soup-can fa-lg">'+ '</ons-icon>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner">'+ '<div class="desc">' + data['details'][i]['varpoboxaddress']+'</div>'+ '</ons-col>'+ '</ons-row>'+ '</ons-list-item>'+ '</ons-list>'+ '<div class=caw-botton>'+ '<ons-row class="row ons-row-inner">'+ '<ons-col class="col ons-col-inner" onclick=gallery.pushpage("book-page.html");>'+ '<div style="border-right: 1px solid rgba(221,221,221,0.6); padding: 12px 0; background: #0ad046; color: #fff;">'+ '<i class="ion-compose">'+'</i>book now</div>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner" onclick=gallery.pushpage("review.html");>'+ '<div style="padding: 12px 0; background: #cccccc; color: #fff;">'+ '<i class="ion-edit">'+ '</i>write review</div>'+ '</ons-col>'+ '<ons-col class="col ons-col-inner" onclick=gallery.pushpage("email-friend.html");>'+ '<div style="padding: 12px 0; background: #0ad046; color: #fff;">'+ '<i class="ion-ios-email">'+ '</i>email-friend</div>'+ '</ons-col>'+ '</ons-row>'+ ' </div>'; } } $scope.show1 = true; $scope.show1 = function(){ $scope.show2 = false; $scope.show3 = false; $scope.show4 = false; }; $scope.show2 = true; $scope.show2 = function(){ $scope.show1 = false; $scope.show3 = false; $scope.show4 = false; }; $scope.show3 = true; $scope.show3 = function(){ $scope.show1 = false; $scope.show2 = false; $scope.show4 = false; }; $scope.show4 = true; $scope.show4 = function(){ $scope.show1 = false; $scope.show2 = false; $scope.show3 = false; }; $scope.openchildwindow = function () { window.open( web, '_blank', 'location=yes'); }; $scope.snippet = content; }).error(function () { alert("error"); }); $scope.sendemail = function(subject, body){ var link = "mailto:"+ email + "&subject=new email " + escape(subject); + "&body=" + escape(body); window.location.href = link; }; $scope.call = function () { parent.location.href = "tel:"+phone; }; $scope.openwebsite = function () { window.open( web, '_blank', 'location=yes'); }; $scope.opensocialsharing = function () { window.plugins.socialsharing.share('message,image , link', null, 'https://www.google.com/images/srpr/logo4w.png', 'http://www.google.com'); }; $scope.deliberatelytrustdangeroussnippet = function () { return $sce.trustashtml($scope.snippet); }; } });
<div id="main-content"> <div ng-controller="eventsimplectrl"> <map zoom="4" center="-25.363882, 131.044922"> <marker position="-25.363882, 131.044922" on-click="click()" title="click zoom"></marker> </map> </div> </div> <script> var app = angular.module('myapp', ['ngmap']); app.controller('eventsimplectrl', ['$scope', '$timeout', function($scope, $timeout) { var marker, map; $scope.$on('mapinitialized', function(evt, evtmap) { map = evtmap; marker = map.markers[0]; // 1 if want keep hardcoded <info-window> // var infowindow = map.infowindows[0]; }); $scope.click = function(event) { var infowindow = new google.maps.infowindow(); infowindow.setcontent('testing'); infowindow.open(map, marker); } }]); </script> note:
i guess using library http://ngmap.github.io, so, docs can have info-windows in 2 ways, 1 put tag direcly <map> tag this:
<info-window id="foo" position="current-location" visible="true"> text here </info-window> and access this
... function($scope, $timeout) { var marker, map, infowindow; $scope.$on('mapinitialized', function(evt, evtmap) { map = evtmap; marker = map.markers[0]; // info-window it's id foo infowindow = map.infowindows['foo']; }); ... after got can use normal gmap api v3
Comments
Post a Comment