How to add multiple cards to a page?

Question

JavaScript

How to add multiple google maps to one page? It’s easy to add one card to the page, with your own markers, your own styles, but I needed to add several cards and then I got stuck, I don’t understand how to do it, the card is tied to an ID by getElementById.

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
    });
  
  // 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";

The question is how to add two or three cards to one page with different addresses? Without duplicating initialization code.

Answer 1

Without duplicating initialization code

Obviously, make a function that will accept an id/element (container for the map) and marker data.

Answer 2

Without duplicating initialization code.

No way.