google maps: marker

by Leo

HTML

<div id="map"></div>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.21&libraries=geometry,places&callback=initMap" async defer></script>

CSS

html, body {
   height: 100%;
   margin: 0;
   padding: 0;
}
#map {
   height: 500px;
   width: 500px;
}

JavaScript

function initMap() {

  var center = new google.maps.LatLng(-33.8688, 151.2195);
  var map = new google.maps.Map(document.getElementById('map'), {
    center: center,
    zoom: 17
  });
  
  //var polylineStyle = "solid";
  //var polylineStyle = "dash-dash";
  var polylineStyle = "dash-dot";
  //var polylineStyle = "dot-dot";
  
  var polylineWidth = 2;
  var polylineOpacity = 1.0;
  var polylineColor = '#FF0000';
  
   
   //polyline
   var polylineCoords = [
    {lat: center.lat() - 0.001, lng: center.lng() - 0.001},
    {lat: center.lat() + 0.001, lng: center.lng() + 0.001}
  ];
  var polyline = new google.maps.Polyline({
    path: polylineCoords,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: polylineOpacity,
    strokeWeight: polylineWidth,
    map: map
  });

  // marker
  var markerImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAlCAMAAAAUaRt1AAAAVFBMVEUgftD///8ATJ7y8vLW1tbj4+MCYLL8/PwUbL729vbo6Oj19fU/hsTt7e3v9Poadsjf398KaLp2qtjb6PShxOJXlcwdcbrn7/cLabtrotLR4vFcndXkn2FYAAABHElEQVQ4jaXTWbKDIBAF0GaQySCombP/fb5GZNAHlY/cP+seFcQGQqTUI2tk1FISAkRqZs3QiLFMSwLYG8+b8QYFSGY47YQbJkFbT5WDRpyi3moY8QF7L3J2gY8YgQ2c7rcIsmcHQPnADuAR+0cX3HXo9b0HcBHXdb2mJTQAzBdCLjP0gQpA/QCcCEC4HsD+PU3vIk7AiVv8DrckTiBsISZt5ATEmsAq2kAmIDtgyumAkNerOu//Hwqey/IsVw0wL8v8G1DfXqE+H3UC1U+LcZhysf20X3/7MjjVs1U1OGX0ilC0Gr00vN5ngb33eXjT+CPyUeCrQ5nHP52gtlGE3up8shkkceorsAncED/0NQjChLXV/QFsG9qWXuUPZ6ARI+eOptAAAAAASUVORK5CYII=";

  var marker = new google.maps.Marker({
    position: center,
    anchorPoint: new google.maps.Point(10, 10),
    icon: {url: markerImage},  
    map: map
  });
  
  
}