How to change the color of google map api draggable markers?
NickName:farhan Ask DateTime:2016-12-01T09:52:47

How to change the color of google map api draggable markers?

what I am trying to achieve is when ever i create a new marker it should have a different color.This is my $scope .

$scope.addRoute = function() {
     console.log('addRoute');
  var marker2 = new google.maps.Marker(
    {
      position: {lat: 52.02, lng: 10.56},
      visible:true,
      icon:'',
      map: map,
      draggable: true
    });      

        directionsDisplay.setMap(map);
 };

Copyright Notice:Content Author:「farhan」,Reproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article:https://stackoverflow.com/questions/40901344/how-to-change-the-color-of-google-map-api-draggable-markers

Answers
Searching 2016-12-01T02:59:53

Using Symbols\n\nIn your existing $scope.addRoute function instead of icon:'' use generateIcon(). \n\n var marker = new google.maps.Marker({\n position : {\n lat : 52.02,\n lng : 10.56\n },\n visible : true,\n icon : generateIcon(),\n map : map,\n draggable : true\n\n });\n\n\nYou will need to add this function in you controller.\n\nfunction generateIcon() {\n //http://map-icons.com/ for svg path\n return {\n\n path : 'M0-48c-9.8 0-17.7 7.8-17.7 17.4 0 15.5 17.7 30.6 17.7 30.6s17.7-15.4 17.7-30.6c0-9.6-7.9-17.4-17.7-17.4z',\n scale : 0.5,\n fillColor : '#' + (Math.random() * 0xFFFFFF << 0).toString(16),\n fillOpacity : 100,\n }\n}\n",


More about “How to change the color of google map api draggable markers?” related questions

How to change the color of google map api draggable markers?

what I am trying to achieve is when ever i create a new marker it should have a different color.This is my $scope . $scope.addRoute = function() { console.log('addRoute'); var marker2 = new

Show Detail

Draggable google map markers

I have been working with google maps and now have a requirement to make a draggable marker that I can place on the map. Is this a big difference in complexity from just placing markers by geolocat...

Show Detail

Toggle dragging of Google Map markers once added as Draggable

I'm developing a Google Map API v2 app, where markers are loaded from a database. These markers can then be dragged to a new location by a user and saved to the database. I'm adding these markers as

Show Detail

Disable one of two draggable Markers in Google API DirectionsService

I'm using Google API Directions Service and i want to disable one of two markers in map. when i use render Options and set draggable to false both of markers set to false but i want disable one of

Show Detail

fitbounds to cover all available markers google map api

I've used map.fitbounds to zoom and center the map to show available markers.Here is my code, marker = new google.maps.Marker( { map:map, draggable:true, animation: google.maps.Animation.D...

Show Detail

ember need multiple markers on google map that are draggable

I have a google map in my Ember app where I need to put some multiple markers on (dynamically generated). Now I tried 2 addons: 1. ember-cli-g-maps: doesn't let me add multiple markers dynamically...

Show Detail

Adding a custom OnMarkerDragListener makes markers no longer draggable

I'm using Google Maps v2 in an Android application that I'm writing. After creating the map and adding all the markers to it, I make all the markers draggable by using marker.setDraggable(true); fo...

Show Detail

How do I make markers draggable, labeled, and deletable? with Google maps javascript API

First of all, I know Google has documentation on how to complete all of these features, but even when I add the exact coding, the map no longer shows up, or it simply does not work. I'm completel...

Show Detail

issues with changing color of google map api markers

I've looked at all the suggestions from previously asked questions similar to mine, as well as following the google maps api developers info page on overlays, but no answers have helped - I'm tryin...

Show Detail

How to make marker draggable in angular-google-map?

I want to make map marker draggable in Map, so it just make it draggable="true" but it is not working. &lt;ui-gmap-google-map center='map.center' zoom='map.zoom' control='map.control' id="

Show Detail