Marker with Label

by m4xout

HTML

<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>

CSS

#map-canvas{
  height: 500px;
  width: 100%;
}

JavaScript

// if HTML DOM Element that contains the map is found...
if (document.getElementById('map-canvas')){
 
  var markerLatLng = new google.maps.LatLng(-33.91727341958453, 151.23348314155578);

  var mapOptions = {
    zoom: 16,
    center: markerLatLng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  
  var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

  var markerIcon = {
        url: 'http://image.flaticon.com/icons/svg/252/252025.svg',
        scaledSize: new google.maps.Size(80, 80),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(32,65),
        labelOrigin:  new google.maps.Point(120,33),
      };
  
  var markerLabel = 'Team Event';
  var marker = new google.maps.Marker({
    map: map,
    animation: google.maps.Animation.DROP,
    position: markerLatLng,
    icon: markerIcon,
    label: {
      text: markerLabel,
      color: "#eb3a44",
      fontSize: "17px",
      fontWeight: "bold"
    }
  });
 
}