减小谷歌地图 API 中图像标记的大小

Question

I'm looking to add custom markers to my google maps API. I'm looking to place a logo in the center of the pin using javascript, HTML and csss. I have added a reference of how I'd like the pin to end up looking below. Any suggestions or assistance in how to do so? Currently, my marker's code is below however, I do not like the way the pin itself looks and I am unable to add a local image to the center of the pin.

--update--

I have create an image of the pin that I would like to use however it displays larger then Id prefer. How can I decrease the size of my marker pin?

        // Add another marker to the map
              var marker1 = new google.maps.Marker({
                position: {lat: 40.79816525932935, lng: -73.96851680216488},
                map: map,
                icon: 'assets/img/columbiapin.png',
              
              });

Ive tried to replace the code with the code below which is what should scale properly but instead, the marker just disappears.

                // Add another marker to the map
                      var marker1 = new google.maps.Marker({
      position: {lat: 40.79816525932935, lng: -73.96851680216488},
      map: map,
      icon: {
        url: 'assets/img/columbiapin.png',
        size: new google.maps.Size(40, 40),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(20, 40)
      }
    });

Answer 1

Google Maps provides a way to create custom maps which also includes a way to add custom icons. However the icons will not be placed inside of the marker. I found the solution to be to create an image of the pin you'd like and then to include it in your code. I will include the code that I then used to edit the size and scale of my image

        var markerColumbia = new google.maps.Marker({
      position: {lat: 40.80409446608371, lng: -73.96858177791212},
      map: map,
      icon: new google.maps.MarkerImage(
        'assets/img/columbiapin4.png',
        null, // size
        new google.maps.Point(0, 0), // origin
        null, // anchor
        new google.maps.Size(27, 40) // scaledSize
      ),
      flat: true // make the marker stay at its position on the map
    });