How can i use custom icon in ng-map marker(angular)?

Question

I have list of shops which contains latitude and longitude and i have particuler user latitude and longitude.

when user clicks map button two marker is showing in map which is identify user and shop location

how can i change that two marker icons instead of default marker A and B how can i use my own custom icons for marker 1.http://www.clker.com/cliparts/U/M/C/p/x/C/google-maps-pin-green.svg

2.http://www.clker.com/cliparts/q/I/Q/u/Z/1/marker-hi.png

angular.module('myApp', ['ngMap'])
    .controller("myCntrl", function ($scope) {
      var _lat1 =12.904778 ;
     var _lon1 =77.585680;
     $scope.lat = _lat1;
     $scope.lon = _lon1;
      $scope.positions = [{pos:[$scope.lat, $scope.lon],name:"User"}];
      $scope.center = [$scope.lat, $scope.lon];
      
      
      $scope.viewMap = false;
      $scope.updateMap = function(dealer) {
        $scope.lat1 = dealer.S_Latitude;
       $scope.lon1 = dealer.S_Longitude;
       icon : 'http://www.clker.com/cliparts/q/I/Q/u/Z/1/marker-hi.png',
        $scope.positions = [{pos:[$scope.lat, $scope.lon],name:"User"}, {pos:[dealer.S_Latitude, dealer.S_Longitude],name:"Store"}];
        $scope.viewMap = true;
        $scope.path = [[$scope.lat, $scope.lon], [dealer.S_Latitude, dealer.S_Longitude]];
      }
    
    $scope.dealers = [{
        
        S_Email_id: "aditiya@gmail.com",
        S_Store: "samsung",
        Store_Name: "Adtiya Samsung Store",
        S_Services: "Regular Service,Software Faults,Hardware Faults",
        Store_long_description: "Undertake all kind of samsung mobiles",
        Store_short_description: "Undertake all kind of samsung mobiles",
  S_Latitude: "12.93489905",
  S_Longitude: "77.57070772",
  S_clocation: ""
    }, {
       
        S_Email_id: "rajs@gmail.com",
        S_Store: "nokia",
        Store_Name: "sri shakthi mobile service",
        S_Services: "Settings Faults,Regular Service,Hardware Faults",
        Store_long_description: "Undertake all kind of nokia mobiles",
        Store_short_description: "Undertake all kind of nokia mobiles",
  S_Latitude: "12.9599264",
  S_Longitude: "77.5924983",
  S_clocation: ""
    }, {
        
        S_Email_id: "sprtive23@gmail.com",
        S_Store: "nokia,samsung",
        Store_Name: "sun mobile service center",
        S_Services: "Regular Service,overall maintenance,Mobile Shield Installation",
        Store_long_description: "Undertake all kind of nokia,samsung mobiles",
        Store_short_description: "Undertake all kind of nokia,samsung mobiles",
  S_Latitude: "12.911229",
  S_Longitude: "77.519281",
  S_clocation:""
  },
 {
        
        S_Email_id: "super@gmail.com",
        S_Store: "nokia,samsung",
        Store_Name: "ragu mobile service center",
        S_Services: "Regular Service,overall maintenance,Mobile Shield Installation",
        Store_long_description: "Undertake all kind of nokia,samsung mobiles",
        Store_short_description: "Undertake all kind of nokia,samsung mobiles",
  S_Latitude: "12.909999",
  S_Longitude: "77.506871",
  S_clocation: ""
  }
    ]

 
  
  

 }
)

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script src="http://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="http://code.angularjs.org/1.4.7/angular.js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>

<style>
    

    .custom-marker {
    font-size: 2em;
    padding: 10px;
    background: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: #7F7F7F solid 1px;
    text-align: center;
    }
    .custom-marker:after {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 7px 6px 0;
    border-color: #fff transparent;
    display: block;
    width: 0;
    z-index: 1;
    margin-left: -6px;
    bottom: -6px;
    left: 50%;
    }
    .custom-marker:before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 7px 6px 0;
    border-color: #7F7F7F transparent;
    display: block;
    width: 0;
    z-index: 0;
    margin-left: -6px;
    bottom: -7px;
    left: 50%;
    }
    </style>
</head>

<body>
  <div ng-controller="myCntrl">
      <label>Case sensitive Search on Label</label><br>
      <input ng-model="query" type="text" placeholder="Search for name" />
      <div>
        <ng-map zoom="12" center="{{lat}}, {{lon}}">
          
          <directions
          draggable="true"
          panel="directions-panel"
          travel-mode="DRIVING"
          origin="{{lat}}, {{lon}}"
          destination="{{lat1}}, {{lon1}}">
        </directions>
        
          
        </ng-map>
        <br><br><br>
      </div>
      <div>
      <div ng-repeat="dealer in dealers">
        {{dealer.Store_Name}}<br>
    {{dealer.S_Email_id}}<br>
    {{dealer.S_clocation}}
        
        <input type="button" name="map" id="map" value="map" ng-click="updateMap(dealer);"><br><br>
   </div>
   </div>
   <br><br><br>
  </div>
</body>
</html>

Demo

score 3 · Answer 1 · answered Sep 06 '17 at 03:58

Don't use the custom-marker directive. It will kill your performance for any large number of markers (e.g. 200+). Instead use the 'icon' attribute of the standard marker, something like this:

<marker id="L: {{loc.position[0]}}, {{loc.position[1]}}" position="{{loc.position}}" icon="{ url:'/assets/images/deal-indicator.png', scaledSize:[32,40], origin: [0,0], anchor: [16,40] }">

The marker directive is just a wrapper for the Google Maps API v3 standard 'marker', so all of the standard marker properties are accessible when using ng-map.

The icon is a Javascript object, and the properties are as follows (from the documentation):

Properties

anchor | Type: Point

The position at which to anchor an image in correspondence to the location of the marker on the map. By default, the anchor is located along the center point of the bottom of the image.

origin | Type: Point

The position of the image within a sprite, if any. By default, the origin is located at the top left corner of the image (0, 0).

The icon can also be set programatically by using the 'setIcon' method of the marker, e.g.:

myMarker.setIcon('/assets/images/deal-indicator-selected.png');

Or, construct an icon object first and set this as the marker:

var customIcon = {
    url: "/images/my-marker.png",
    scaledSize: new google.maps.Size(32, 40),
    origin: new google.maps.Point(0, 0), 
    anchor: new google.maps.Point(16, 40)
};

myMarker.setIcon(customIcon);

itsphilz · Answer 2 · 2016-03-18T08:14:00.907

0

Please, please, read the documentation about custom markers for ng-maps: https://ngmap.github.io/#/!custom-marker.html

<custom-marker id="usa" position="united state of america" on-click="ifNeeded()"></custom-marker>

Edit: Full code below;

<ng-map zoom="12" center="{{lat}}, {{lon}}">

      <directions
      draggable="true"
      panel="directions-panel"
      travel-mode="DRIVING"
      origin="{{lat}}, {{lon}}"
      destination="{{lat1}}, {{lon1}}">
    </directions>

    <custom-marker id="can" position="canada" on-click="click()">
        <div>
            <b>Hi, USA</b>
            <img src="http://icons.iconarchive.com/icons/custom-icon-design/2014-world-cup-flags/32/USA-icon.png" />
        </div>
    </custom-marker>

</ng-map>

edited Mar 18 '16 at 08:14

answered Mar 17 '16 at 08:42

itsphilz

455
2
9

i am new to angular please help me out .if you don't mind please update my code – Mar 17 '16 at 10:56
I have provided you with the answer, I will not write your code for you, that is not what StackOverflow is for. – itsphilz Mar 17 '16 at 13:41
Acutally i don't know where i have to add that code . i am struggling that's why i asked sorry – Mar 18 '16 at 03:55
no my expectaton . when user click map button two marker icon is showing now .instead of that two marker icon how can we show two different marker custom marker icons in map – Mar 18 '16 at 11:32
nothing is working can you please check .http://plnkr.co/edit/6ZY5YdaR5qrdw41jpO2t?p=preview – Mar 19 '16 at 13:02

How can i use custom icon in ng-map marker(angular)?

2 Answers2