Add Custom Marker in Google Maps

To add custom Marker in Google Maps add the following code in your JavaScript

var image = 'custom-marker.png';
  var myLatLng = new google.maps.LatLng(40.6743890, -73.9455);
  var Marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

See full Code:

var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);

var stylez = [
    {
      featureType: "all",
      elementType: "all",
      stylers: [
        { saturation: -100 } // <-- THIS
      ]
    }
];

var mapOptions = {
    zoom: 11,
    center: brooklyn,
    mapTypeControlOptions: {
         mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'tehgrayz']
    }
};

map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

var image = 'custom-marker.png';
  var myLatLng = new google.maps.LatLng(40.6743890, -73.9455);
  var Marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      icon: image
  });

var mapType = new google.maps.StyledMapType(stylez, { name:"Grayscale" });
map.mapTypes.set('tehgrayz', mapType);
map.setMapTypeId('tehgrayz');

Advertisements