Google Map（JavaScript API）の埋め込み

今まで、Google Maps JavaScript APIを使ったマップ埋め込みには、JSなどの知識が必要でした。

それが今では、GUI上で調整してソースを貼り付けるだけで、埋め込みが可能となるサイトがあります。

設定したマップ情報を保存するには、アカウントを作る必要がありますが、ソースコードを生成するだけであれば、必要ありません。

このサイトでは、複数ポイント指定やマップ機能も細かく調整する事が可能だったり、地図のスタイルも簡単に変えることが出来ます。
※APIキーは、Google Developersから別途取得する必要があります。

<!-- Google map code from EZ Map - https://ezmap.co -->
<script src='https://maps.googleapis.com/maps/api/js?key='></script>
<script>
  function init() {
    var mapOptions = { "center": {  "lat": 33.8454974780299,  "lng": 132.76543222367764 }, "clickableIcons": true, "disableDoubleClickZoom": false, "draggable": true, "fullscreenControl": true, "keyboardShortcuts": true, "mapMaker": false, "mapTypeControl": true, "mapTypeControlOptions": {  "text": "Default (depends on viewport size etc.)",  "style": 0 }, "mapTypeId": "roadmap", "rotateControl": true, "scaleControl": true, "scrollwheel": true, "streetViewControl": true, "styles": false, "zoom": 14, "zoomControl": true};
    var mapElement = document.getElementById('ez-map');
    var map = new google.maps.Map(mapElement, mapOptions);
    var marker0 = new google.maps.Marker({title: "No Title", icon: "https://maps.gstatic.com/mapfiles/api-3/images/spotlight-poi.png", position: new google.maps.LatLng(33.845469074997155, 132.7655616402626), map: map});
var infowindow0 = new google.maps.InfoWindow({content: "<p></p>",map: map});
marker0.addListener('click', function () { infowindow0.open(map, marker0) ;});infowindow0.close();

    google.maps.event.addDomListener(window, "resize", function() { var center = map.getCenter(); google.maps.event.trigger(map, "resize"); map.setCenter(center); });
  }
google.maps.event.addDomListener(window, 'load', init);
</script>
<style>
  #ez-map{min-height:150px;min-width:150px;height: 420px;width: 100%;}
  #ez-map .infoTitle{}
  #ez-map .infoWebsite{}
  #ez-map .infoEmail{}
  #ez-map .infoTelephone{}
  #ez-map .infoDescription{}
</style>
<div id='ez-map'></div>
<!-- End of EZ Map code - https://ezmap.co -->

未ログインでは、アイコン画像の指定はリストから選択のみになりますが、出力したソースコードを改変することで、独自のアイコンにすることも可能です。
アイコン画像を変える場合は、icon: のパスを変更してください。