JSFiddle - React, Tailwind, and code Playground

by tea4two

HTML

<script src='https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&language=ja'></script>
検索: <input type="text" id="address" value="">
<input type="button" value="検索" onClick="moveMap();">
<div id="map"></div>
    
<script>
var latlng = new google.maps.LatLng(35.692437, 139.700676);

var opts = {
    zoom: 17,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
}

var map = new google.maps.Map(document.getElementById('map'), opts);

function moveMap() {
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({
        'address': document.getElementById('address').value
    },
    function (result, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.panTo(result[0].geometry.location);
            var marker = new google.maps.Marker({
                position: result[0].geometry.location,
                map: map
            });

        } else {
            alert("エラーです。");
        }
    });
}

var obj = {
    position: new google.maps.LatLng(35.692437, 139.700676),
    map: map
};
var marker = new google.maps.Marker(obj); //マーカーの表示
var info = new google.maps.InfoWindow({
        content:'<img src="http://dummyimage.com/200x100/e62e9c/ffffff.png&text=ダミー" width="180" alt="渋谷まちなみ"><p>渋谷駅周辺</p>'
});

info.open(map, marker);
google.maps.event.addListener(marker, 'click', function () {
    info.open(map, marker);
}); //クリックして、吹き出しを表示させる関数
    </script>

CSS

#map {
    height: 500px;
}