<!DOCTYPE html>
<html>
<head>
    <title>GoogleMap</title>
    <meta name="viewport" content="initial-scale=1.0" />
    <style>
        html {height:100%}
        body {height:100%; margin:0;}
        #map {height:100%}
        .gm-style-iw {margin-top:2px;}
        /* InfoWindow‚Μ?‚πΑ‚· */
        .gm-style-iw + div {display: none; }
        }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"></script>
    <script>
        function initMap() {
            var styledMapType = new google.maps.StyledMapType([
                {
                    featureType: 'road.highway',
                    elementType: 'geometry',
                    stylers: [{color: '#FF0000'}]
                },{
                    featureType: 'road.arterial',
                    elementType: 'geometry',
                    stylers: [{color: '#FFA500'}]			
                },{
                    featureType: 'road.local',
                    elementType: 'geometry',
                    stylers: [{color: '#C0C0C0'}]			
                },{
                    featureType: 'administrative.locality',
                    elementType: 'geometry',
                    stylers: [{color: '#0000FF'}]			
                }
            ],{name: '“Ή˜H‹­’²'});         
            var map = new google.maps.Map(document.getElementById("map"), {
                zoom: 14,
                center: {lat:35.749950, lng:140.523972}
	    });
            map.mapTypes.set('“Ή˜H‹­’²', styledMapType);
            map.setMapTypeId('“Ή˜H‹­’²');
            var opt = {
                mapTypeControlOptions: {
                    mapTypeIds: ['roadmap', 'satellite', '“Ή˜H‹­’²']
                }
            };
            map.setOptions(opt);
            var info1 = new google.maps.InfoWindow( {
                position:  {lat:35.749950, lng:140.523972},
                content: '<style>'+
                         '  @keyframes guruguru {'+
                         '    0% {'+
                         '      transform: rotate(0deg);'+
                         '    }'+
                         '    100% {'+
                         '      transform: rotate(360deg);'+
                         '    }'+
                         '  }'+
                         '  img.kousyou {'+
                         '    animation-duration:1s;'+
                         '  }'+
                         '  img.kousyou:hover {'+
                         '    animation-name: guruguru;'+
                         '  }'+
                         '</style>'+
                         '<div style="font-weight: bold;overflow:hidden;">'+
                         '  <img class="kousyou" style="width:32px;height:30px;vertical-align:middle;margin-right:5px;" src="./?action=common_download_main&upload_id=110" />'+
                         '  Œ§—§”э‚“Α•ΚŽx‰‡ŠwZ'+
                         '</div>'
            });
            info1.open(map);
        }
    </script>
</head>
<body onload="initMap()">
    <div id="map"></div>
</body>
</html>