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..svg
2..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 : '.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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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=",visualization,drawing,geometry,places"></script>
<script src=".4.7/angular.js"></script>
<script src=".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>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./cliparts/U/M/C/p/x/C/google-maps-pin-green.svg
2.http://www.clker./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./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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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: "[email protected]",
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./maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="http://code.angularjs/1.4.7/angular.js"></script>
<script src="http://rawgit./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
Share Improve this question edited Mar 19, 2016 at 13:03 asked Mar 17, 2016 at 6:44 user5861300user58613002 Answers
Reset to default 3Don'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);
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./icons/custom-icon-design/2014-world-cup-flags/32/USA-icon.png" />
</div>
</custom-marker>
</ng-map>