(Semantic-UI) GoogleMap挿入の仕方

GoogleMap定義

ここはいつも通り

  <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
  <script>
  $(document).ready(function() {
    var latlng = new google.maps.LatLng(35.68121300000001, 139.767294);
    var myOptions = {
      zoom: 17,
      center: latlng
    };
    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
    marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
  });
  </script>

Semantic-UI ui embed を使う

  <div class="ui vertical stripe segment" id="access">
    <div class="ui middle aligned stackable container">
      <div class="ui text container">
        <h3 class="ui header centered">
          <p>ACCESS</p>
        </h3>
      </div>
      <div class="ui embed" id="map_canvas">
      </div>
    </div>
  </div>

たぶん使い方違うんだろうけどなぁ。。。 semantic-ui.com