Undefined auf tohere und fromhere Nachrichtenfenster in Google Maps API V3

Question

Ich habe eine Karte auf meiner Website laden (Ich bin kein Java-Coder das ist Code, den ich im Internet gefunden habe). Ich habe herausgefunden, wie es am besten für meine Bedürfnisse funktioniert. Wenn Sie jedoch auf die Links "Hier" oder "Von hier" klicken, statt die Adresse aus der Markierung zu füllen, wird sie im Nachrichtenfenster als undefiniert angezeigt. Ich bin sicher, dass dies etwas, das einfach ist mir fehlt aber jede Hilfe

var directionsDisplay = new google.maps.DirectionsRenderer(); 
var directionsService = new google.maps.DirectionsService(); 
// arrays to hold copies of the markers and html used by the side_bar 
// because the function closure trick doesnt work there 
var gmarkers = []; 
var htmls = []; 

// arrays to hold variants of the info window html with get direction forms open 
var to_htmls = []; 
var from_htmls = []; 

// global "map" variable 
var map = null; 

var infowindow = new google.maps.InfoWindow({ 
    size: new google.maps.Size(150, 50) 
}); 


function initialize() { 

    var location = new google.maps.LatLng(33.3440017700195, -111.96068572998); 

    var mapOptions = { 
     center: location, 
     zoom: 14, 
     scrollwheel: true 
    }; 

    map = new google.maps.Map(document.getElementById("map"), 
     mapOptions); 

    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById("map")); 
    google.maps.event.addListener(map, 'click', function() { 
     infowindow.close(); 
    }); 

    var image = { 
     url: 'http://maps.google.com/mapfiles/ms/micons/green.png' 
    }; 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(33.34396, -111.960606), 
     map: map, 
     animation: google.maps.Animation.DROP, 
     icon: image, 
     Title: 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284' 
    }); 

    var i = gmarkers.length; 
    latlng = location; 

    // The info window version with the "to here" form open 
    to_htmls[i] = html + 
     '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' + 
     '<br>Start address:<form action="javascript:getDirections()">' + 
     '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + 
     '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' + 
     'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + 
     '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() + 
     '"/>'; 
    // The info window version with the "from here" form open 
    from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' + 
     '<br>End address:<form action="javascript:getDirections()">' + 
     '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' + 
     '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' + 
     'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + 
     '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() + 
     '"/>'; 
    // The inactive version of the direction info 
    var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>'; 
    var contentString = html; 

    google.maps.event.addListener(marker, 'click', function() { 
     map.setZoom(15); 
     map.setCenter(marker.getPosition()); 
     infowindow.setContent(contentString); 
     infowindow.open(map, marker); 
    }); 
    // save the info we need to use later for the side_bar 
    gmarkers.push(marker); 
    htmls[i] = html; 
} 

google.maps.event.addDomListener(window, 'load', initialize); 

// ===== request the directions ===== 
function getDirections() { 
    // ==== Set up the walk and avoid highways options ==== 
    var request = {}; 
    if (document.getElementById("walk").checked) { 
     request.travelMode = google.maps.DirectionsTravelMode.WALKING; 
    } else { 
     request.travelMode = google.maps.DirectionsTravelMode.DRIVING; 
    } 

    if (document.getElementById("highways").checked) { 
     request.avoidHighways = true; 
    } 
    // ==== set the start and end locations ==== 
    var saddr = document.getElementById("saddr").value; 
    var daddr = document.getElementById("daddr").value; 

    request.origin = saddr; 
    request.destination = daddr; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
      directionsDisplay.setDirections(response); 
     } else alert("Directions not found:" + status); 
    }); 
} 


// This function picks up the click and opens the corresponding info window 
function myclick(i) { 
    google.maps.event.trigger(gmarkers[i], "click"); 
} 


// functions that open the directions forms 
function tohere(i) { 
    //gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
    infowindow.setContent(to_htmls[i]); 
    infowindow.open(map, gmarkers[i]); 
} 

function fromhere(i) { 
    //gmarkers[i].openInfoWindowHtml(from_htmls[i]); 
    infowindow.setContent(from_htmls[i]); 
    infowindow.open(map, gmarkers[i]); 
} 

Answer 1

geschätzt Sie sind nicht die html Variable definiert, die für das erste Feld des HTML in dem Infofenster verwendet wird.

// The info window version with the "to here" form open 
to_htmls[i] = html + 
    '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' + 
// ... 
    '"/>'; 

, dass das HTML angezeigt werden soll sein soll, im Fall oder Ihr Beispiel funktioniert dies für mich:

html = 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284<br>'; 

Auch Sie haben ein Problem mit der title Eigenschaft des Markers. Sie weisen die Eigenschaft Title zu, die nicht dieselbe ist (bei Javascript wird die Groß-/Kleinschreibung beachtet).

(Auch FYI, die MarkerOptions Titel Eigenschaft nicht HTML-Markup unterstützen, so dass Sie nicht HTML-Markup im Titel-String enthalten sollte)

proof of concept fiddle

Code-Schnipsel:

var directionsDisplay = new google.maps.DirectionsRenderer(); 
 
var directionsService = new google.maps.DirectionsService(); 
 
// arrays to hold copies of the markers and html used by the side_bar 
 
// because the function closure trick doesnt work there 
 
var gmarkers = []; 
 
var htmls = []; 
 

 
// arrays to hold variants of the info window html with get direction forms open 
 
var to_htmls = []; 
 
var from_htmls = []; 
 

 
// global "map" variable 
 
var map = null; 
 

 
var infowindow = new google.maps.InfoWindow({ 
 
    size: new google.maps.Size(150, 50) 
 
}); 
 

 

 
function initialize() { 
 

 
    var location = new google.maps.LatLng(33.3440017700195, -111.96068572998); 
 

 
    var mapOptions = { 
 
    center: location, 
 
    zoom: 14, 
 
    scrollwheel: true 
 
    }; 
 

 
    map = new google.maps.Map(document.getElementById("map"), 
 
    mapOptions); 
 

 
    directionsDisplay.setMap(map); 
 
    directionsDisplay.setPanel(document.getElementById("map")); 
 
    google.maps.event.addListener(map, 'click', function() { 
 
    infowindow.close(); 
 
    }); 
 

 
    var image = { 
 
    url: 'http://maps.google.com/mapfiles/ms/micons/green.png' 
 
    }; 
 
    var marker = new google.maps.Marker({ 
 
    position: new google.maps.LatLng(33.34396, -111.960606), 
 
    map: map, 
 
    animation: google.maps.Animation.DROP, 
 
    icon: image, 
 
    Title: 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284' 
 
    }); 
 
    html = 'Fusion Formulations<br>1430 W Auto Drive<br>Tempe, AZ 85284<br>'; 
 
    var i = gmarkers.length; 
 
    latlng = location; 
 

 
    // The info window version with the "to here" form open 
 
    to_htmls[i] = html + 
 
    '<b>To here<\/b> - <a href="javascript:fromhere(' + i + ')">From here<\/a>' + 
 
    '<br>Start address:<form action="javascript:getDirections()">' + 
 
    '<input type="text" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' + 
 
    '<INPUT value="Get Directions" TYPE="button" onclick="getDirections()"><br>' + 
 
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + 
 
    '<input type="hidden" id="daddr" value="' + latlng.lat() + ',' + latlng.lng() + 
 
    '"/>'; 
 
    // The info window version with the "from here" form open 
 
    from_htmls[i] = html + '<a href="javascript:tohere(' + i + ')">To here<\/a> - <b>From here<\/b>' + 
 
    '<br>End address:<form action="javascript:getDirections()">' + 
 
    '<input type="text" SIZE=40 MAXLENGTH=40 name="daddr" id="daddr" value="" /><br>' + 
 
    '<INPUT value="Get Directions" TYPE="SUBMIT"><br>' + 
 
    'Walk <input type="checkbox" name="walk" id="walk" /> &nbsp; Avoid Highways <input type="checkbox" name="highways" id="highways" />' + 
 
    '<input type="hidden" id="saddr" value="' + latlng.lat() + ',' + latlng.lng() + 
 
    '"/>'; 
 
    // The inactive version of the direction info 
 
    var html = marker.getTitle() + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here<\/a> - <a href="javascript:fromhere(' + i + ')">From here<\/a>'; 
 
    var contentString = html; 
 

 
    google.maps.event.addListener(marker, 'click', function() { 
 
    map.setZoom(15); 
 
    map.setCenter(marker.getPosition()); 
 
    infowindow.setContent(contentString); 
 
    infowindow.open(map, marker); 
 
    }); 
 
    // save the info we need to use later for the side_bar 
 
    gmarkers.push(marker); 
 
    htmls[i] = html; 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize); 
 

 
// ===== request the directions ===== 
 
function getDirections() { 
 
    // ==== Set up the walk and avoid highways options ==== 
 
    var request = {}; 
 
    if (document.getElementById("walk").checked) { 
 
    request.travelMode = google.maps.DirectionsTravelMode.WALKING; 
 
    } else { 
 
    request.travelMode = google.maps.DirectionsTravelMode.DRIVING; 
 
    } 
 

 
    if (document.getElementById("highways").checked) { 
 
    request.avoidHighways = true; 
 
    } 
 
    // ==== set the start and end locations ==== 
 
    var saddr = document.getElementById("saddr").value; 
 
    var daddr = document.getElementById("daddr").value; 
 

 
    request.origin = saddr; 
 
    request.destination = daddr; 
 
    directionsService.route(request, function(response, status) { 
 
    if (status == google.maps.DirectionsStatus.OK) { 
 
     directionsDisplay.setDirections(response); 
 
    } else alert("Directions not found:" + status); 
 
    }); 
 
} 
 

 

 
// This function picks up the click and opens the corresponding info window 
 
function myclick(i) { 
 
    google.maps.event.trigger(gmarkers[i], "click"); 
 
} 
 

 

 
// functions that open the directions forms 
 
function tohere(i) { 
 
    //gmarkers[i].openInfoWindowHtml(to_htmls[i]); 
 
    infowindow.setContent(to_htmls[i]); 
 
    infowindow.open(map, gmarkers[i]); 
 
} 
 

 
function fromhere(i) { 
 
    //gmarkers[i].openInfoWindowHtml(from_htmls[i]); 
 
    infowindow.setContent(from_htmls[i]); 
 
    infowindow.open(map, gmarkers[i]); 
 
}

html, 
 
body, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map"></div>

(beachten Sie die tatsächliche Wegbeschreibung Anfrage funktioniert nicht im Code-Snippet aufgrund einer Sicherheitsbeschränkung: Blocked form submission to 'javascript:getDirections()' because the form's frame is sandboxed and the 'allow-forms' permission is not set., funktioniert es in der fiddle)