Custom markers in google maps

1

I want to create a custom marker for the google map control. I just want a simple “+” mark from using svg path commands. Standard javascript does not seem to work. Any ideas?

2

This is what I used years ago to draw fenceposts (“Posts” array of lat and long positions) on a farm map.

    '//:::                                                                         :::'
    '//:::  Definitions:                                                           :::'
    '//:::    South latitudes are negative, east longitudes are positive           :::'
    '//:::                                                                         :::'
    '//:::  Passed To Function:                                                    :::'
    '//:::    lat1, lon1 = Latitude And Longitude of point 1 (in decimal degrees)  :::'
    '//:::    lat2, lon2 = Latitude And Longitude of point 2 (in decimal degrees)  :::'
    '//:::    unit = the unit you desire For results                               :::'
    '//:::           where: M is statute miles (default)                           :::'
    '//:::                  K is kilometers, M is meters                           :::'
    '//:::                  N is nautical miles                                    :::'
    '//:::                                                                         :::'
    radlat1 = Math.PI * lat1/180
    radlat2 = Math.PI * lat2/180
    theta = lon1-lon2
    radtheta = Math.PI * theta/180
    dist = Math.sin(radlat1) * Math.sin(radlat2) + Math.cos(radlat1) * Math.cos(radlat2) * Math.cos(radtheta)
    dist = Math.acos(dist)
    dist = dist * 180/Math.PI
    dist = dist * 60 * 1.1515
    If unit = "K" Then dist = dist * 1.609344
    If unit = "M" Then dist = (dist * 1.609344) * 1000
    If unit = "N" Then dist = dist * 0.8684
    DistanceBetween2Points = dist
  End Function
'______________________________________________________________________________________________________________________________________'


Function initMap()
  bc = "bluecircle.png"
  wp = "WoodenPost.png"
  origin = { lat: lat, lng: lng }
  If FirstMapCentre = "none" Then FirstMapCentre = origin
  myloc = { lat: Currentlat, lng: Currentlng }
  v = DistanceBetween2Points(Currentlat, Currentlng, lat, lng, "M")
  If v > 999 Then 
    v = Round(v/1000,1) & "k"
  Else
    v = Round(v,0) & "m"
  End If
  pathCoordinates = [myloc, origin]
  'console.log(pathCoordinates)
  map = new google.maps.Map(document.getElementById("FarmMap"), {zoom: 17, center: FirstMapCentre, mapTypeId: "satellite", mapTypeControl: False, streetViewControl: False})
  new ClickEventHandler(map, origin)
  marker = new google.maps.Marker({position: origin, map: map})
  myloc_marker = new google.maps.Marker({position: myloc, map: map, icon: bc})
  mypath = new google.maps.Polyline({path: pathCoordinates, geodesic: True, strokeColor: "lightgrey", strokeOpacity: 1.0, strokeWeight: 2})
  'google.maps.geometry.spherical.computeArea
  mypath.setMap(map)
  x = UBound(Posts)
  If x >=0 Then
    myfence = new google.maps.Polyline({path: Posts, geodesic: True, strokeColor: "yellow", strokeOpacity: 1.0, strokeWeight: 4, strokeDasharray: "5 1"})
    myfence.setMap(map)
    Post_marker = new google.maps.Marker({position: Posts[0], map: map, icon: wp})  'start post
    Post_marker = new google.maps.Marker({position: Posts[x], map: map, icon: wp})   'end post
  End If
  
  'console.log(mypath)
  
  infowindow = new google.maps.InfoWindow({content: HM_HazardTextBox.value & "<br>" & v})
  infowindow.open(map, marker)
3

Where should I put this?

<!-- Klucz API -->
<script async defer
  src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
4

I already know, in the project properties in extraheaders