2016-07-29 9 views
0

私は自分のサイトにマップを読み込んでいます(これはインターネット上で見つかったコードです)。私は主に私のニーズに対応する方法を考え出しました。ただし、マーカーからアドレスを入力するのではなく、To HereまたはFrom Hereリンクをクリックすると、メッセージウィンドウに未定義として表示されます。私は、私が行方不明です、これは簡単なものであると確信していますが、任意のヘルプはGoogleマップのtohereとfromhereのメッセージウィンドウに定義されていません。API V3

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]); 
} 

答えて

2

を高く評価しているあなたは、情報ウィンドウにHTMLの最初のフィールドに使用されるhtml変数を定義していません。あなたが表示したいHTMLでなければなりません

// 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>' + 
// ... 
    '"/>'; 

、ケースまたはあなたの例では、これは私の作品:

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

、あなたはマーカーのtitle性質の問題を持っています。同じではないTitleプロパティを割り当てています(javascriptでは大文字と小文字が区別されます)。

(あなたはタイトル文字列にHTMLマークアップを含めるべきではありませんので、また、FYI、MarkerOptionsタイトルプロパティは、HTMLマークアップをサポートしていません)

proof of concept fiddle

コードスニペット:

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>

(実際のルートリクエストはセキュリティ制限のためコードスニペットで機能しません:Blocked form submission to 'javascript:getDirections()' because the form's frame is sandboxed and the 'allow-forms' permission is not set.fiddleで動作します)

+0

この問題はすべて修正されました。 –

+1

これがあなたの質問に回答した/あなたの問題を修正した場合は、[同意してください](http://meta.stackoverflow.com/questions/5234/how-does-accepting-an-answer-work) – geocodezip

関連する問題