GoogleMaps

API有効化

APIを有効化
Maps JavaScript API

住所からMapを表示する場合
Geocoding API

認証情報

コード

<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&callback=initMap" async></script>
<script type="text/javascript">
 var map;
 var marker;
 var geocoder;
 function initMap() {
  geocoder = new google.maps.Geocoder();
  geocoder.geocode({
    'address': "兵庫県西宮市~" //住所
   }, function(results, status) {
   if (status === google.maps.GeocoderStatus.OK) {
    map = new google.maps.Map(document.getElementById('gmap'), {
     center: results[0].geometry.location,
     zoom: 17 //ズーム
    });
    marker = new google.maps.Marker({
     position: results[0].geometry.location,
     map: map
    });
    infoWindow = new google.maps.InfoWindow({
     content: '<h4>会社住所</h4>'
    });
    marker.addListener('click', function() {
     infoWindow.open(map, marker);
    });
   } else {
    alert(status);
   }
  });
 }
</script>

<div id="gmap"></div>

Follow me!