<div class="map" id="map_canvas"></div>
<div class="map" id="map_canvas2"></div>
.map {
  height: 300px;
  width: 300px;
  margin: 0px;
  padding: 0px
}

function initialize() {
  var map = new google.maps.Map(
    
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(47.356755, 8.553866),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  
    /*document.getElementById("map_canvas2"), {
      center: new google.maps.LatLng(47.356755, 8.553866),
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    */

  
  // Define custom marker object
  var image = {
    url: crosshair,
    anchor: new google.maps.Point(25, 25),
    scaledSize: new google.maps.Size(50, 50)
  };

  // Create the marker
  var marker = new google.maps.Marker({
    position: map.getCenter(),
    map: map,
    icon: image
  });

}

google.maps.event.addDomListener(window, "load", initialize);

var crosshair = "http://icons.iconarchive.com/icons/icons-land/vista-map-markers/32/Map-Marker-Marker-Outside-Chartreuse-icon.png";

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js
  2. https://maps.googleapis.com/maps/api/js?key=AIzaSyA4asxO8kGu8rGxbAP_5zezGcy8u1qMQUM