Voilà le code HTML d'intégration correspondant à la carte interactive ci-dessus !



  
  <div data-owlappsmaplyrgroup = "yes"> 
  
    <iframe  name="Displaying arrows on the map" style = "border:none;width:100%;min-height:350px;height:80%;" data-owlappsmap = "yes" 
    
     data-owlappscss= ' { 
      
      "internal" :
        "   
          
          .rotateimgpoint {
          
            transform:translate(-50%, -50%) rotate(175deg) !important;
          
          }         
      
        "
      }'
    
    >
    
    <kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">  
        
      <Document>
        
        <Placemark>
	        
          <name> Target</name>
	        
          <Style>
          
            <IconStyle>
            
              <Icon>
              
                <href>
                
                  <![CDATA[
                  
                    https://www.owlapps.net/modules/owlapps_apps/embedmap/img/greenpoint.png
                    
                  ]]>
                  
                </href>
                
              </Icon>
              
              <scale> 2 </scale>
	            
              <hotSpot x="0.5"  y="0.5" xunits="fraction" yunits="fraction"/>
            
            </IconStyle>
            
          </Style>
          
          <Point>
	        
            <coordinates>
		        
              2.33935,48.85777
		          
            </coordinates>
	          
          </Point>
	        
        </Placemark>
        
       <Placemark>
          
          <name>
          
            Point-type geometry displays an arrow
            
          </name>
          
          <Style>
          
            <IconStyle>
            
              <richDecos>
              
                <img>
                
                  <url>
                  
                    <![CDATA[
                    
                      https://www.owlapps.net/modules/owlapps_apps/embedmap/img/arrowcenter.png
                      
                    ]]>
                    
                  </url>
                  
                  <pixelSize>
                  
                    200px
                    
                  </pixelSize>
                  
                  <className>
                  
                    rotateimgpoint
                    
                  </className>
                  
                </img>
                
              </richDecos>
               
              <scale> 0 </scale>
              
            </IconStyle>
            
          </Style>
          
          <Point>
          
            <coordinates>
            
              2.34508345748226,48.85809381479696
              
            </coordinates>
            
          </Point>
          
        </Placemark>
        
          
        <Placemark>
        
          <name>
          
            Displaying a line-type geometry arrow head
            
          </name>
          
          <Style>
          
            <LineStyle>
            
              <color>
                
                FFcd12ff
                
              </color>
              
              <width>
              
                4
                
              </width>
                
                <richDecos>

                  <img>
                    
                    <url>
                      
                      <![CDATA[
                      
                        https://www.owlapps.net/modules/owlapps_apps/embedmap/img/arrowhead.jpg
                       
                      ]]>
                      
                    </url>
                    
                    <rotate>
                    
                      true
                      
                    </rotate>
                    
                    <pixelSize>
                    
                      4em
                      
                    </pixelSize>
                    
                    <offSet>
                    
                      100%
                      
                    </offSet>
                    
                    <repeat>
                      
                      100%
                        
                    </repeat>
                      
                  </img>
                  
                </richDecos>
       
              </LineStyle>
             
            </Style>
            
            <LineString>
            
              <coordinates>
              
                2.331165539511821,48.85378549010994 2.337345465321932,48.85668483712807 
              
              </coordinates>
              
            </LineString>
            
          </Placemark>
	        
	          
          <Placemark>
          
            <name>
            
              HTML upward arrow
              
            </name>
            
            <Snippet>
            
              <![CDATA[
              
                Using the HTML upward arrow: <a target="_blank" href="https://www.htmlsymbols.xyz/unicode/U+2191" >https://www.htmlsymbols.xyz/unicode/U+2191</a>
              
              ]]>
              
            </Snippet>
            
            <Style>
            
              <LineStyle>
              
              <color>
              
                00000000
                
              </color>
              
              <width>
              
                0
                
              </width>
              
              <richDecos>
              
                <raw>
                
                  <repeat>
                  
                    80px;
                    
                  </repeat>
                  
                  <content>
                  
                    <![CDATA[
                    
                      <span style="font-size:7em; color: red;" > ↑ </span>
                      
                    ]]>
                    
                  </content>
                  
                  <rotate>
                  
                    true
                    
                  </rotate>
                  
                </raw>
                
              </richDecos>
              
            </LineStyle>
            
          </Style>
          
          <LineString>
          
            <coordinates>
            
              2.335761830958047,48.86310719113639 2.338871933356745,48.85846311841082
              
            </coordinates>
            
          </LineString>
          
          </Placemark>
      
          <GroundOverlay>
        
            <name>
          
              GroundOverlay tag displays an arrow
            
            </name>
          
            <Icon>
          
              <href>
            
                <![CDATA[
              
                  https://www.owlapps.net/modules/owlapps_apps/embedmap/img/redarrow.png
                
                ]]>
              
              </href>
            
            </Icon>
          
            <LatLonBox>
          
              <north> 48.85582666913463 </north>
            
              <south> 48.85116036635507 </south>
            
              <east> 2.348090623990567 </east>
            
              <west> 2.336495846286845 </west>
            
              <rotation>
            
                118.7484817504883
              
              </rotation>
            
            </LatLonBox>
          
          </GroundOverlay>
        
        </Document>
    
      </kml>
  
    </iframe>

  </div>
  
  


Video demo: