unserver-unify/src/app/company/map.html

<div ng-controller="CompanyMapCtrl as ctrl">
  <div class="col-md-4">
    <div class="profile sidebar no-wrap">
      <div class="panel-heading" style="padding:15px;">
        <div class="input-group ">
          <input class="form-control" ng-model="ctrl.postcode" placeholder="{{ 'Enter your postcode or address' | translate }}" type="text"/>
          <span class="input-group-btn">
            <button class="btn btn-primary" ng-click="ctrl.searchostcode(ctrl.postcode)" type="button">
              <i class="fa fa-search">
              </i>
            </button>
          </span>
        </div>
      </div>
      <div class="profile-event map_list" ng-class="{'active':ctrl.current==$index}" ng-click="ctrl.hightLight(item,$index)"  ng-repeat="item in ctrl.items | orderBy: 'dis'">
        <h3 class="heading-xs">
          <b>
            {{item.name}}
          </b>
        </h3>
        <p>
          {{item.address}}
          <br>
          {{item.postcode}}
          <br>
          {{item.tel}}
          <br>
          <span ng-if="item.country">{{item.country}}</span>
        </p>
        <div class="item-date font-12">
          <ul class="company_details">
            <li>
              <a translate="" ui-sref="index.company.detail.overview({cid: item._id})">
                VIEW DETAILS
              </a>
            </li>
            <li>
              |
            </li>
            <li>
              <a ng-href="mailto:{{item.email}}" target="_blank" translate="">
                EMAIL
              </a>
            </li>
          </ul>
          <span class="twitter-time pull-right">
            {{ item.dis | number :3  }} KM
          </span>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-8 padding-left-0">
    <div style="padding: 15px; background: #fff;">
      <div map-lazy-load="https://maps.google.com/maps/api/js?key=AIzaSyCDpjAui7Bp-lfs3akUG4zGId3RAyhGA1M">
        <ng-map center="{{ctrl.mysrclat}},{{ctrl.mysrclong}}" default-style="false" style="height:600px;" zoom="12">
          <shape center="{{company.pos}}" fill-color="#5fb611" fill-opacity="0.35" name="circle" ng-repeat="company in ctrl.companyInfo" no-watcher="true" radius="400" stroke-color="#555" stroke-opacity="0.6" stroke-weight="2">
          </shape>
          <custom-marker ng-repeat="company in ctrl.companyInfo" position="{{company.pos}}">
            <div class="zone-title">
              <b>
                {{company.name}}
              </b>
            </div>
          </custom-marker>
          <marker ng-if="ctrl.markerlat && loginService.school.homepage=='genx'" icon="assets/images/gsx_marker.png" optimized="true" position="{{ctrl.markerlat}},{{ctrl.markerlng}}">
          </marker>
          <marker ng-if="ctrl.markerlat && loginService.school.homepage!='genx'" icon="assets/images/bamboo_marker.png" optimized="true" position="{{ctrl.markerlat}},{{ctrl.markerlng}}">
          </marker>
          <marker position="current" animation="Animation.BOUNCE" centered="true"></marker>
          <custom-marker position="current">
            <div class="zone-title yourlocation">
              <b>
                YOUR LOCATION
              </b>
            </div>
          </custom-marker>
          <!-- <marker  optimized="true" position="{{ctrl.mysrclat}},{{ctrl.mysrclong}}">
          </marker> -->
          <!-- <custom-marker position="{{ctrl.mysrclat}},{{ctrl.mysrclong}}">
            <div class="zone-title yourlocation">
              <b>
                YOUR LOCATION
              </b>
            </div>
          </custom-marker> -->
        </ng-map>
      </div>
    </div>
  </div>
  <div class="margin-bottom-20">
  </div>
</div>