Map with Marker

by roberts gailitis

HTML

<h3>Port of Riga location</h3>
<!--The div element for the map -->
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBjSrjlrnKALLEUCNzuPNT92W26ZkVhiIw&callback=initMap">
</script>

CSS

/* Set the size of the div element that contains the map */
#map {
  height: 300px;  /* The height is 400 pixels */
  width: 300px;  /* The width is the width of the web page */
 }

JavaScript

// Initialize and add the map
function initMap() {
  // The location of Uluru
  var Riga = {lat: 56.9593, lng: 24.0947};
  
var icon = {
    url: "http://infomaritime.eu/wp-content/uploads/2018/09/freeport_of_riga_authority.jpg", // url
    scaledSize: new google.maps.Size(50, 50), // scaled size
    origin: new google.maps.Point(0,0), // origin
    anchor: new google.maps.Point(20, 40) // anchor
};

 var contentString = '<div id="content">'+
            '<img src="http://infomaritime.eu/wp-content/uploads/2018/09/port_riga.jpg" width = "100%";">'+
            '</div>';

        var infowindow = new google.maps.InfoWindow({
          content: contentString
        });
  // The map, centered at Uluru
  var map = new google.maps.Map(
      document.getElementById('map'), {zoom: 3, center: Riga});
  // The marker, positioned at Uluru
  var marker = new google.maps.Marker({position: Riga, map: map, icon: icon });
    marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

}