angularjs - Ionic Show Google Map Result from Json file -



angularjs - Ionic Show Google Map Result from Json file -

i doing assignment. there 1 scenario user search companies' name, etc. user click result --> shows company details include map. know how pass json file's location data(a long list,i paste hereinbelow short one) view. also, how create mark on showed map. used setcenter got wrong result. tks reply in advance. attach here js, html , css.

class="snippet-code-js lang-js prettyprint-override">angular.module('starter', ['ionic']) .run(function($ionicplatform) { $ionicplatform.ready(function() { if(window.cordova && window.cordova.plugins.keyboard) { cordova.plugins.keyboard.hidekeyboardaccessorybar(true); } if(window.statusbar) { statusbar.styledefault(); } }); }) .controller('mapcontroller', function($scope, $ionicloading) { google.maps.event.adddomlistener(window, 'load', function(pos) { var mylatlng = new google.maps.latlng(40.785091, -73.968285); var mapoptions = { center: mylatlng, zoom: 16, maptypeid: google.maps.maptypeid.roadmap }; var map = new google.maps.map(document.getelementbyid("map"), mapoptions); $scope.map = map; }); }); /// there no place anymore, paste json file here: { "data": [{ "office_id": "1", "name": "demo office", "shortname":"demo", "address": "somewhere", "latitude": "64.49815080", "longitude": "28.76102540", "active": "1", "locked": "0" }, { "office_id": "2", "name": "health center", "shortname":"health", "address": "thailand", "latitude": "61.19945900", "longitude": "25.65550300", "active": "1", "locked": "0" }], "status": 0, "message": "some message", "messageid": 0 } class="snippet-code-css lang-css prettyprint-override">/* empty. add together own css if */ .scroll { height: 100%; } #map { width: 100%; height: 100%; } class="snippet-code-html lang-html prettyprint-override"><!doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title></title> <link href="lib/ionic/css/ionic.css" rel="stylesheet"> <link href="css/style.css" rel="stylesheet"> <script src="lib/ionic/js/ionic.bundle.js"></script> <script src="cordova.js"></script> <script src="js/app.js"></script> </head> <body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-stable"> <h1 class="title">ionic blank starter</h1> </ion-header-bar> <ion-content ng-controller="mapcontroller"> <div id="map" data-tap-disabled="true"></div> </ion-content> </ion-pane> <script src="http://maps.googleapis.com/maps/api/js?key=[my api key]&sensor=true"></script> </body> </html>

i asked similar google map related question other day, scroll reply , see how implemented json data. problems allow me know.

angularjs google map multiple markers

json angularjs google-maps ionic

Comments

Popular posts from this blog

java - How to set log4j.defaultInitOverride property to false in jboss server 6 -

c - GStreamer 1.0 1.4.5 RTSP Example Server sends 503 Service unavailable -

Using ajax with sonata admin list view pagination -