CODEWITHSUNDEEP
javascriptjquerygoogle-mapsgoogle-maps-api-3
user8573805
user8573805

Reputation:

How to change google map marker color

Here i a musing google map API,From here have one array (locations), from this array i have latitude and longitude values ,based on this values i am creating route,now what i want to do means staring point marker i want display in green,Currently statring location and ending location both are in red.

var res = {
  "loginType": "logout",
  "status": "success",
  "count": 1,
  "absentCount": 2,
  "startingLat": "12.9817121",
  "startingLng": "77.72649609999996",
  "companyLat": "12.9563031",
  "companyLng": "77.6949695",
  "data": [{
      "empName": "Trisha",
      "pickupTime": "07:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956604",
      "pickupLongitude": "77.696480",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    }
  ],
  "travlledLocation": [{
      "Travlinglatitude": "12.956664",
      "Travlinglongitude": "77.696829"
    },
    {
      "Travlinglatitude": "12.956604",
      "Travlinglongitude": "77.696480"
    },
    {
      "Travlinglatitude": "12.956523",
      "Travlinglongitude": "77.696021"
    },
    {
      "Travlinglatitude": "12.956413",
      "Travlinglongitude": "77.695380"
    },
    {
      "Travlinglatitude": "12.956335",
      "Travlinglongitude": "77.695029"
    },
    {
      "Travlinglatitude": "12.956230",
      "Travlinglongitude": "77.694997"
    },
    {
      "Travlinglatitude": "12.956107",
      "Travlinglongitude": "77.694994"
    },
    {
      "Travlinglatitude": "12.955934",
      "Travlinglongitude": "77.694970"
    },
    {
      "Travlinglatitude": "12.955639",
      "Travlinglongitude": "77.694932"
    },
    {
      "Travlinglatitude": "12.955380",
      "Travlinglongitude": "77.694902"
    }
  ]
}

var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = res.travlledLocation.map(function(o, i) {
  return [
    i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'End' : i,
    o.Travlinglatitude,
    o.Travlinglongitude,
    i + 1
  ]
});

var waypoints = res.data.map(function(o) {
  return {
    empName: o.empName,
    pickupTime: o.pickupTime,
    lat: o.pickupLatitude,
    lng: o.pickupLongitude
  }
});


function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    //center: new google.maps.LatLng(-33.92, 151.25), // 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    if (locations[i][3] == 1 || locations[i][3] == locations.length) {

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        i: locations[i][0]
      });
    }

    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent(marker.i);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));

    if (i == 0) request.origin = marker.getPosition();
    else if (i == locations.length - 1) request.destination = marker.getPosition();


  }
  //push the waypoints to request.waypoints array
  waypoints.forEach(function(v, i) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(v.lat, v.lng),
      map: map,
      icon: {
        url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png',
        scaledSize: new google.maps.Size(45, 45)
      },
      data: v
    });
    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));
  })

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);
 html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}
<div id="map"></div>
  <script
    src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY">
    </script>

My Updated code

<form id="formmapping">


<select  name="tripId">
      <option value="gMAcX">gMAcX</option>
      <option value="nQjXB">nQjXB</option>
  </select>

    <button type="submit" class="btn btn-info pull-right" id="btnsubmit">Submit</button>

</form>


<script type="text/javascript">
  $('#btnsubmit').click(function(e){

e.preventDefault();
$.ajax({
   type:'POST',
   url :"getLatLan.php",
   data : $('form#formmapping').serialize(),
    success: function(data) {
       /*if(res['status']=='success'){


       }*/
       var res = {
  "loginType": "logout",
  "status": "success",
  "count": 1,
  "absentCount": 2,
  "startingLat": "12.9817121",
  "startingLng": "77.72649609999996",
  "companyLat": "12.9563031",
  "companyLng": "77.6949695",
  "data": [{
      "empName": "Trisha",
      "pickupTime": "07:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956604",
      "pickupLongitude": "77.696480",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    },
    {
      "empName": "Divya",
      "pickupTime": "08:45 AM",
      "cabName": "Atios",
      "pickupLatitude": "12.956230",
      "pickupLongitude": "77.694997",
    }
  ],
  "travlledLocation": [{
      "Travlinglatitude": "12.956664",
      "Travlinglongitude": "77.696829"
    },
    {
      "Travlinglatitude": "12.956604",
      "Travlinglongitude": "77.696480"
    },
    {
      "Travlinglatitude": "12.956523",
      "Travlinglongitude": "77.696021"
    },
    {
      "Travlinglatitude": "12.956413",
      "Travlinglongitude": "77.695380"
    },
    {
      "Travlinglatitude": "12.956335",
      "Travlinglongitude": "77.695029"
    },
    {
      "Travlinglatitude": "12.956230",
      "Travlinglongitude": "77.694997"
    },
    {
      "Travlinglatitude": "12.956107",
      "Travlinglongitude": "77.694994"
    },
    {
      "Travlinglatitude": "12.955934",
      "Travlinglongitude": "77.694970"
    },
    {
      "Travlinglatitude": "12.955639",
      "Travlinglongitude": "77.694932"
    },
    {
      "Travlinglatitude": "12.955380",
      "Travlinglongitude": "77.694902"
    }
  ]
}

var geocoder;
var map;
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var locations = res.travlledLocation.map(function(o, i) {
  return [
    i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'End' : i,
    o.Travlinglatitude,
    o.Travlinglongitude,
    i + 1
  ]
});

var waypoints = res.data.map(function(o) {
  return {
    empName: o.empName,
    pickupTime: o.pickupTime,
    lat: o.pickupLatitude,
    lng: o.pickupLongitude
  }
});


function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer({
    suppressMarkers: true
  });


  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 10,
    //center: new google.maps.LatLng(-33.92, 151.25), // 
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  directionsDisplay.setMap(map);
  var infowindow = new google.maps.InfoWindow();

  var marker, i;
  var request = {
    travelMode: google.maps.TravelMode.DRIVING
  };
  for (i = 0; i < locations.length; i++) {
    if (locations[i][3] == 1 || locations[i][3] == locations.length) {

      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        i: locations[i][0],


icon: {

url : locations[i][0]=='Start' ?'http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png' : 'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png', scaledSize: locations[i][0]=='Start'? new google.maps.Size(40, 40) :new google.maps.Size(45, 45)

        }
      });
    }

    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent(marker.i);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));

    if (i == 0) request.origin = marker.getPosition();
    else if (i == locations.length - 1) request.destination = marker.getPosition();


  }
  //push the waypoints to request.waypoints array
  waypoints.forEach(function(v, i) {
    marker = new google.maps.Marker({
      position: new google.maps.LatLng(v.lat, v.lng),
      map: map,
      icon: {
        url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png',
        scaledSize: new google.maps.Size(45, 45)
      },
      data: v
    });
    google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
      return function() {
        infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime);
        infowindow.open(map, marker);
      };
    })(marker, infowindow));
  })

  directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });
}

google.maps.event.addDomListener(window, "load", initialize);
    }
  });
  });
</script>

Upvotes: 0

Views: 2287

Answers (2)

jANVI
jANVI

Reputation: 748

    var res = {
      "loginType": "logout",
      "status": "success",
      "count": 1,
      "absentCount": 2,
      "startingLat": "12.9817121",
      "startingLng": "77.72649609999996",
      "companyLat": "12.9563031",
      "companyLng": "77.6949695",
      "data": [{
          "empName": "Trisha",
          "pickupTime": "07:45 AM",
          "cabName": "Atios",
          "pickupLatitude": "12.956604",
          "pickupLongitude": "77.696480",
        },
        {
          "empName": "Divya",
          "pickupTime": "08:45 AM",
          "cabName": "Atios",
          "pickupLatitude": "12.956230",
          "pickupLongitude": "77.694997",
        },
        {
          "empName": "Divya",
          "pickupTime": "08:45 AM",
          "cabName": "Atios",
          "pickupLatitude": "12.956230",
          "pickupLongitude": "77.694997",
        }
      ],
      "travlledLocation": [{
          "Travlinglatitude": "12.956664",
          "Travlinglongitude": "77.696829"
        },
        {
          "Travlinglatitude": "12.956604",
          "Travlinglongitude": "77.696480"
        },
        {
          "Travlinglatitude": "12.956523",
          "Travlinglongitude": "77.696021"
        },
        {
          "Travlinglatitude": "12.956413",
          "Travlinglongitude": "77.695380"
        },
        {
          "Travlinglatitude": "12.956335",
          "Travlinglongitude": "77.695029"
        },
        {
          "Travlinglatitude": "12.956230",
          "Travlinglongitude": "77.694997"
        },
        {
          "Travlinglatitude": "12.956107",
          "Travlinglongitude": "77.694994"
        },
        {
          "Travlinglatitude": "12.955934",
          "Travlinglongitude": "77.694970"
        },
        {
          "Travlinglatitude": "12.955639",
          "Travlinglongitude": "77.694932"
        },
        {
          "Travlinglatitude": "12.955380",
          "Travlinglongitude": "77.694902"
        }
      ]
    }

    var geocoder;
    var map;
    var directionsDisplay;
    var directionsService = new google.maps.DirectionsService();
    var locations = res.travlledLocation.map(function(o, i) {
      return [
        i == 0 ? 'Start' : i == res.travlledLocation.length - 1 ? 'End' : i,
        o.Travlinglatitude,
        o.Travlinglongitude,
        i + 1
      ]
    });

    var waypoints = res.data.map(function(o) {
      return {
        empName: o.empName,
        pickupTime: o.pickupTime,
        lat: o.pickupLatitude,
        lng: o.pickupLongitude
      }
    });


    function initialize() {
      directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true
      });


      var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        //center: new google.maps.LatLng(-33.92, 151.25), // 
        mapTypeId: google.maps.MapTypeId.ROADMAP
      });
      directionsDisplay.setMap(map);
      var infowindow = new google.maps.InfoWindow();

      var marker, i;
      var request = {
        travelMode: google.maps.TravelMode.DRIVING
      };
      for (i = 0; i < locations.length; i++) {
        if (locations[i][3] == 1 || locations[i][3] == locations.length) {

          marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            i: locations[i][0],
        

    icon: {
url : locations[i][0]=='Start' ?'http://www.myiconfinder.com/uploads/iconsets/256-256-8055c322ae4049897caa15e5331940f2.png' : 'http://www.myiconfinder.com/uploads/iconsets/256-256-76f453c62108782f0cad9bfc2da1ae9d.png',
scaledSize: locations[i][0]=='Start'? new google.maps.Size(40, 40) :new google.maps.Size(45, 45)

            }
          });
        }

        google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
          return function() {
            infowindow.setContent(marker.i);
            infowindow.open(map, marker);
          };
        })(marker, infowindow));

        if (i == 0) request.origin = marker.getPosition();
        else if (i == locations.length - 1) request.destination = marker.getPosition();


      }
      //push the waypoints to request.waypoints array
      waypoints.forEach(function(v, i) {
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(v.lat, v.lng),
          map: map,
          icon: {
            url: 'http://www.myiconfinder.com/uploads/iconsets/256-256-56165014858e6dbadaf3ba00d782f125.png',
            scaledSize: new google.maps.Size(45, 45)
          },
          data: v
        });
        google.maps.event.addListener(marker, 'click', (function(marker, infowindow) {
          return function() {
            infowindow.setContent('<b>Employee Name : </b>' + marker.data.empName + '<br><b>pickupTime : </b>' + marker.data.pickupTime);
            infowindow.open(map, marker);
          };
        })(marker, infowindow));
      })

      directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(result);
        }
      });
    }

    google.maps.event.addDomListener(window, "load", initialize);
     html,
    body,
    #map {
      height: 100%;
      width: 100%;
      margin: 0px;
      padding: 0px
    }
    <div id="map"></div>
      <script
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyC7lDrYPDmJz1JsQh2rbWA9uRZHcFk_xJY">
        </script>

Upvotes: 0

DenseCrab
DenseCrab

Reputation: 1313

You can just set the icon while initializing the Marker:

marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map,
        i: locations[i][0],
        icon: i == 0 ? 'http://maps.google.com/mapfiles/ms/icons/green-dot.png' : 'someothericon.png'
      });

Other icons:

http://maps.google.com/mapfiles/ms/icons/blue-dot.png http://maps.google.com/mapfiles/ms/icons/yellow-dot.png http://maps.google.com/mapfiles/ms/icons/red-dot.png http://maps.google.com/mapfiles/ms/icons/orange-dot.png http://maps.google.com/mapfiles/ms/icons/purple-dot.png

Of course you can also make your own icon

Upvotes: 1

Related Questions