15026

[code]

    $(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);
    };
[/code]

[code]

    #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;
    }
[/code]

[code]

    <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>
[/code]

地図が表示されないので分かりにくいのですが、  
現状、地図上ある地点をクリックするとその地点のアドレスつまり住所が表示されるようになっています。

やりたいことは、この表示された住所をWeb Speech APIのSpeechSynthesisUtteranceを使って音声出力したのですが、

こういった実装はできますでしょうか？


CC BY-SA 3.0
2015-08-29T07:22:35.467
14993
2015-08-30T10:49:40.640
2015-08-30T10:49:40.640
2238
8415
question
javascript jquery google-maps
地図上でクリックしたと同時にその地点の住所表示と音声を出力したい


何に躓いているのかがよくわかりませんが、「できるかできないか」でいえば、以下のようにすれば可能です。  
何行かコピペしただけですが……  
なお、JQueryを追加すればスタックオーバーフロー上のコードスニペットでも実行可能です。

[code]

    $(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);
                  
                  
                  // ここから /////////////////////////////////////
                  var address = result[0].formatted_address;
                  document.querySelector('#text1').value = address;
                  // 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 = address;
                  msg.lang = document.querySelector('#selectVoice').value;
                  msg.onend = function(event) {
                    console.log('speech end. time=' + event.elapsedTime + 's');
                  }
                  speechSynthesis.speak(msg);
                  // ここまでを追加 ////////////////////////////////
    
    
                } 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);
    };
[/code]

[code]

    #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;
    }
[/code]

[code]

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <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>
[/code]


CC BY-SA 3.0
2015-08-30T04:14:00.890
15026
2015-08-30T04:14:00.890
10330
14993
answer