スマホアプリで、Google Mapを表示するには、以下のコードを使いました。 どの部分はなにを変更したかとコメントで書いています。
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script> <script type="text/javascript"> var map_canvas; function initialize_map() { var map_center = new google.maps.LatLng(35.6745973, 139.7778069); var map_options = { mapTypeId: google.maps.MapTypeId.ROADMAP, center: map_center, zoom: 14, mapTypeControlOptions: { mapTypeIds: [google.maps.MapTypeId.ROADMAP, "style"] } }; map_canvas = new google.maps.Map( document.getElementById("map_canvas"), map_options ); //マップの色や道路設定を変更しました。 var mapstyle = [ { stylers: [{ saturation: 33 }, { hue: "#0099ff" }, { lightness: -8 }] }, { featureType: "poi", stylers: [{ visibility: "simplified" }] }, { featureType: "transit.station.bus", stylers: [{ visibility: "off" }] }, { featureType: "road.highway", stylers: [{ saturation: -48 }, { lightness: 42 }] } ]; var myOptions = { name: "Blue" }; var mapType = new google.maps.StyledMapType(mapstyle, myOptions); map_canvas.mapTypes.set("style", mapType); map_canvas.setMapTypeId("style"); //Google mapで東京駅、大井町駅、八丁堀駅を3つマーカとして表す。 var markerData = new Array(); markerData.push({ lat: "35.681382", lng: "139.766084" }); markerData.push({ lat: "35.684801", lng: "139.766086" }); markerData.push({ lat: "35.6745973", lng: "139.7778069" }); for (i = 0; i < markerData.length; i++) { create_marker(markerData[i].lat, markerData[i].lng); } } function create_marker(lat, lng) { var marker_options = { map: map_canvas, position: new google.maps.LatLng(lat, lng), zIndex: 0 }; var marker = new google.maps.Marker(marker_options); } google.maps.event.addDomListener(window, "load", initialize_map); </script>