CODEWITHSUNDEEP
google-maps-api-3
Francisco Luiz Brum Pinto
Francisco Luiz Brum Pinto

Reputation: 83

How to change maker icon

I want to change the marker icon when the clock reaches 10 PM and go back to same icon when 6 AM .. how do I pick the right time of the clock from somewhere? and how to put the icon to change such a time thanks !!

my code 

 function initialize() {

    var mapDiv = document.getElementById('map-canvas');
    var map = new google.maps.Map(mapDiv, {
      center: new google.maps.LatLng(-22.968015,-43.183161),
      zoom: 16,
      mapTypeId: google.maps.MapTypeId.ROADMAP       });



  var green = 'images/VERDE.png';
  var yellow = 'images/AMARELO.png';
  var red = 'images/VERMELHA.png';



  var marker = new google.maps.Marker({
      map: map,
      position: new google.maps.LatLng(-22.967311,-43.186073),      
      icon:  green});

Upvotes: 2

Views: 962

Answers (1)

david strachan
david strachan

Reputation: 7228

The following code changes the the marker according to time.

var now=new Date().getUTCHours();
now -= 2;//Set for Rio Adjust to your time zone 
var startTime = 22;//10 PM
var finishTime = 6;//6 AM
var icon;

function initialize() {

var mapDiv = document.getElementById('map');
var map = new google.maps.Map(mapDiv, {
    center: new google.maps.LatLng(-22.968015,-43.183161),
    zoom: 16,
    mapTypeId: google.maps.MapTypeId.ROADMAP       });
var green = 'images/green.png';
var yellow = 'images/yellow.png';
var red = 'images/red.png';
//Choosing icon by time
if(now >= finishTime&&now < startTime){
    icon = green;
}else {
    icon = red;
}


var marker = new google.maps.Marker({
  map: map,
  position: new google.maps.LatLng(-22.967311,-43.186073),      
  icon:  icon});

}

Points to note.

  1. Only works in one time zone.
  2. You will need to alter now -= 2 to suit local time with winter saving if required.
  3. The boundry values may require tuning.

Upvotes: 1

Related Questions