<!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-left: 10px; margin-top:2px;} .gm-style-iw + div {display: none; } } </style> <script src="https://maps.googleapis.com/maps/api/js?v=3&key=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: '道路強調'}); var map = new google.maps.Map(document.getElementById("map"), { zoom: 14, center: {lat:35.749950, lng:140.523972} }); map.mapTypes.set('道路強調', styledMapType); map.setMapTypeId('道路強調'); var opt = { mapTypeControlOptions: { mapTypeIds: ['roadmap', 'satellite', '道路強調'] } }; map.setOptions(opt); var info1 = new google.maps.InfoWindow( { position: {lat:35.749950, lng:140.523972}, content: '<div style="font-weight: bold;"><img style="width:32px;height:30px;vertical-align:middle;margin-right:5px;" src="./?action=common_download_main&upload_id=110" />県立飯高特別支援学校</div>' }); info1.open(map); } </script> </head> <body onload="initMap()"> <div id="map"></div> </body> </html>