Add icon to google map

Question

I have this plunker which shows a google map with centre at [40.74, -74.18].

http://plnkr.co/edit/BfYggKO8nDolhmpq92dq?p=preview

<!DOCTYPE html>
<html ng-app="ngMap">

<head>
  <title>Simle Map</title>
  <meta name="description" content="Simple Map">
  <meta name="keywords" content="ng-map,AngularJS,center">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  <script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
  <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
  <script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
</head>

<body>
  <ng-map center="[40.74, -74.18]"></ng-map>
</body>

</html>

The code uses angularjs. The google-map angularjs library used is http://ngmap.github.io/

I would like to add the icon below at a nearby point, say, [50.74, -74.18]. How can this be done?

http://ngmap.github.io/#/marker-simple.html ? Or is there more to your question? — sinanspd, Dec 09 '15 at 03:16
very close. Upvoted your comment. But what if I want to add my own marker using my own icon image? — guagay_wk, Dec 09 '15 at 03:18
Then read the documentation and the links on the left side of the page, http://ngmap.github.io/#/custom-marker.html — Patrick Evans, Dec 09 '15 at 03:19

score 2 · Accepted Answer · answered Dec 11 '15 at 10:40

You could specify icon attribute for marker directive to set custom marker icon:

<script src="https://maps.google.com/maps/api/js?libraries=placeses,visualization,drawing,geometry,places"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="https://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.js"></script>
<div ng-app="ngMap">
   <ng-map center="[54.74, -74.18]" style="height: 480px;" zoom="4" >
      <marker position="50.74, -74.18" title="Hello World!" icon="http://s19.postimg.org/scc4cevlv/marker_Icon.png"></marker>
   </ng-map>
</div>

Plunker

Add icon to google map

1 Answers1