地図上でクリックしたと同時にその地点の住所表示と音声を出力したい
$(document).ready(function(){
var map, marker;
$(function(){
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': '東京都渋谷区'
}, function(result, status){
if(status == google.maps.GeocoderStatus.OK) {
var latlng = result[0].geometry.location;
var options = {
zoom : 15,
center : latlng,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'), options);
google.maps.event.addListener(map, 'click',function(event){
var marker = new google.maps.Marker({
position: event.latLng,
map:map
});
geocoder.geocode({
'latLng':event.latLng
}, function(result, status) {
if(status == google.maps.GeocoderStatus.OK){
var infoWindow = new google.maps.InfoWindow({
content: result[0].formatted_address
});
infoWindow.open(map, marker);
} else {
alert("エラーです!");
}
});
});
} else {
alert("エラーです!");
}
});
});
});
document.querySelector('#btn3').onclick = function () {
// unsupported.
if (!'SpeechSynthesisUtterance' in window) {
alert('Web Speech API には未対応です.');
return;
}
var msg = new SpeechSynthesisUtterance();
msg.volume = 1;
msg.rate = 1;
msg.pitch = 2;
msg.text = document.querySelector('#text1').value;
msg.lang = document.querySelector('#selectVoice').value;
msg.onend = function (event) {
console.log('speech end. time=' + event.elapsedTime + 's');
}
speechSynthesis.speak(msg);
};
#text1 {
width: 90%;
height: 3em;
padding: 10px;
border: 1px solid #ccc;
border-radius: 3px;
margin-bottom: 10px;
font-size: 1.4em;
font-weight: 700;
}
#btn3 {
background: -webkit-linear-gradient(top,#008dfd 30%,#0370ea 100%);
color: white;
text-shadow: 1px 1px 1px #076bd2;
border-radius: 3px;
border: 1px solid #076bd2;
padding: 8px 25px;
font-weight: 700;
font-size: 15px;
}
#selectVoice {
width: 200px;
}
#map {
width: 960px;
height: 300px;
margin: 0 auto;
}
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<main>
<div id="map"></div>
</main>
<input id="text1" type="text" value="こんにちは、私は横浜市に住んでいます。"/><br>
<br>
<input id="btn3" type="button" value="speech" style="width:200px;"/>
<select id="selectVoice">
<option value="ja-JP">日本語</option>
<option value="en-US">English</option>
</select>
地図が表示されないので分かりにくいのですが、
現状、地図上ある地点をクリックするとその地点のアドレスつまり住所が表示されるようになっています。
やりたいことは、この表示された住所をWeb Speech APIのSpeechSynthesisUtteranceを使って音声出力したのですが、
こういった実装はできますでしょうか?