HTML machen Marker klickbar auf Google Maps

-1

Ich zeichne einige Marker mit gmplot aus Python. Es erzeugt eine HTML-Datei wie diese:HTML machen Marker klickbar auf Google Maps

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps - pygmaps </title> 
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=visualization&sensor=true_or_false"></script> 
<script type="text/javascript"> 
    function initialize() { 
     var centerlatlng = new google.maps.LatLng(4.670719, -74.099096); 
     var myOptions = { 
      zoom: 13, 
      center: centerlatlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

     var latlng = new google.maps.LatLng(11.008578, -74.813284); 
     var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png'); 
     var marker = new google.maps.Marker({ 
     title: "http://www.google.com", 
     icon: img, 
     position: latlng 
     }); 
     marker.setMap(map); 

     var latlng = new google.maps.LatLng(10.396109, -75.518069); 
     var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png'); 
     var marker = new google.maps.Marker({ 
     title: "http://www.google.com", 
     icon: img, 
     position: latlng 
     }); 
     marker.setMap(map); 
     ... (and so on) 
    } 
</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
    <div id="map_canvas" style="width: 100%; height: 100%;"></div> 
</body> 
</html>

wo /home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png das Verzeichnis, das die Marker-Datei speichert. Ich habe viele Punkte wie diese und für jeden Punkt habe ich eine URL. In diesem Fall habe ich die URL einfach als "http://www.google.com" in den Titel des Markers eingetragen. Wenn ich die HTML-Datei mit einem Webbrowser öffne und über die Markierungen blicke, wird mir die URL angezeigt. Ich möchte in der Lage sein, auf den Marker zu klicken und den Browser die URL öffnen zu lassen. Ich habe nicht viel Wissen in HTML, also finde ich das ziemlich schwierig. Ich schätze Ihre Hilfe und guten Glauben. Vielen Dank.

Quelle

2017-01-27 Vladimir Vargas

Haben Sie versucht, 'marker.addEventListener ('Klick', function() {...});'? –

@GonsaloSousa nein. Welche Funktion sollte ich verwenden, um dem Link zu folgen? –

Soll ich das für jeden Marker machen? –

ou könnte eine Funktion hinzufügen, für den Hörer für Marker auf Click-Ereignis verwalten

 function initialize() { 
      var centerlatlng = new google.maps.LatLng(4.670719, -74.099096); 
      var myOptions = { 
       zoom: 13, 
       center: centerlatlng, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

      // add a function for closure 
      var addListenersOnMarker = function(actMarker, aTarget,) { 

       google.maps.event.addListener(actMarker, 'click', function (event) { 
        window.open(aTarget, '_blank'); 
       }); 
      } 


      var latlng = new google.maps.LatLng(11.008578, -74.813284); 
      var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png'); 
      var marker = new google.maps.Marker({ 
      //title: "http://www.google.com", 
      icon: img, 
      position: latlng 
      }); 
      marker.setMap(map); 

      // call the function for listener 
      addListenersOnMarker(marker, "http://www.google.com") ; 


      var latlng = new google.maps.LatLng(10.396109, -75.518069); 
      var img = new google.maps.MarkerImage('/home/vladimir/anaconda3/lib/python3.5/site-packages/gmplot/markers/FF0000.png'); 
      var marker = new google.maps.Marker({ 
      //title: "http://www.google.com", 
      icon: img, 
      position: latlng 
      }); 
      marker.setMap(map); 

      // call the function for listener 
      addListenersOnMarker(marker, "http://www.google.com") ; 

      var 
      ... (and so on) 

     }

Quelle

2017-01-27 20:45:49 scaisEdge

HTML machen Marker klickbar auf Google Maps

Antwort

Verwandte Themen