{"id":597,"date":"2013-11-28T13:40:11","date_gmt":"2013-11-28T04:40:11","guid":{"rendered":"http:\/\/www.aveit.biz\/blog\/?p=597"},"modified":"2013-11-29T17:01:27","modified_gmt":"2013-11-29T08:01:27","slug":"googlemap_api_v3","status":"publish","type":"post","link":"https:\/\/www.aveit.biz\/blog\/work\/googlemap\/googlemap_api_v3.html","title":{"rendered":"Google Maps API \u30d0\u30fc\u30b8\u30e7\u30f33\uff08V3\uff09\u8a2d\u7f6e\u6cd5\u3068 Google Maps API Styled Map Wizard \u3067\u30b9\u30bf\u30a4\u30ea\u30c3\u30b7\u30e5\u306aGoogle Map\u69cb\u7bc9\u30e1\u30e2\uff01"},"content":{"rendered":"

Google Maps API \u30d0\u30fc\u30b8\u30e7\u30f3 3\uff08V3\uff09\u8a2d\u5b9a<\/h2>\n

Google Maps JavaScript API V3 \u306fAPI \u30ad\u30fc\u304c\u306a\u304f\u3066\u3082\u6b63\u5e38\u306b\u6a5f\u80fd<\/strong>\u3057\u307e\u3059\u304c\u3001API\u30b3\u30f3\u30bd\u30fc\u30eb\u30ad\u30fc\u3092\u4f7f\u3046\u3068\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306eMapsAPI\u306e\u4f7f\u7528\u72b6\u6cc1\u3092\u30c1\u30a7\u30c3\u30af\u51fa\u6765\u308b\u3088\u3046\u306b\u306a\u308b\u3088\u3046\u3067\u3059\u3002<\/span><\/p>\n

API\u30ad\u30fc\u53d6\u5f97\u304b\u3089\u8a2d\u5b9a\u306e\u65b9\u6cd5<\/h3>\n

\uff08\u30b9\u30bf\u30fc\u30c8 \u30ac\u30a4\u30c9<\/a>\u304b\u3089\u4e00\u90e8\u629c\u7c8b\u3057\u3066\u3044\u307e\u3059\u3002\uff09<\/p>\n

1\uff09API \u30ad\u30fc\u306e\u53d6\u5f97<\/h4>\n

\"developerconsole\"<\/a>\u65e5\u672c\u8a9e\u7248 Google Maps API Styled Map Wizard<\/a><\/strong><\/p>\n

Google Play Developer Console<\/a><\/p>\n

    \n
  1. API \u30b3\u30f3\u30bd\u30fc\u30eb\u306b\u30a2\u30af\u30bb\u30b9 \u2191\u2191\u2191<\/span><\/li>\n
  2. \u5de6\u306e\u30e1\u30cb\u30e5\u30fc\u304b\u3089 [Services] \u3092\u30af\u30ea\u30c3\u30af\u3002<\/span><\/li>\n
  3. GoogleMapsAPIv3\u30b5\u30fc\u30d3\u30b9\u3092\u30aa\u30f3\u3002<\/span><\/li>\n
  4. \u5de6\u306e\u30e1\u30cb\u30e5\u30fc\u304b\u3089 [API Access] \u3092\u30af\u30ea\u30c3\u30af\u3002API \u30ad\u30fc\u306f\u3001[API Access] \u30da\u30fc\u30b8\u306e [Simple API Access] \u30bb\u30af\u30b7\u30e7\u30f3\u306b\u3042\u308b\u3002MapsAPI\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306f [Keyforbrowserapps] \u3092\u4f7f\u7528\u3002<\/span><\/li>\n<\/ol>\n

    2\uff09HTML5 \u3068\u3057\u3066\u5ba3\u8a00\u3059\u308b<\/h4>\n

    html5\u3067\u8a18\u8ff0\u3059\u308b\u3068\u306a\u3063\u3066\u3044\u307e\u3059\u304chtml4\u3067\u3082\u6a5f\u80fd\u3059\u308b\u3088\u3046\u3067\u3059\uff01\uff1f<\/p>\n

    <!doctype html><\/pre>\n
    3\uff09Google Maps API \u3092\u8aad\u307f\u8fbc\u3080<\/h4>\n
    <script type="text\/javascript" src="http:\/\/maps.googleapis.com\/maps\/api\/js?key=\u3010YOUR_API_KEY\u3011&sensor=SET_TO_TRUE_OR_FALSE"><\/script><\/pre>\n
    \u3010YOUR_API_KEY\u3011\u306f\u4e0a\u8a18\u3067\u53d6\u5f97\u3057\u305f\u30ad\u30fc\u3068\u7f6e\u304d\u63db\u3048<\/p>\n
    4\uff09HTTPS<\/h4>\n
    HTTPS \u63a5\u7d9a\u3067 Google Maps JavaScript API \u3092\u8aad\u307f\u8fbc\u3080\u3053\u3068\u3082\u53ef\u80fd\uff01<\/p>\n
    <script type="text\/javascript" src="https:\/\/maps.googleapis.com\/maps\/api\/js?key=\u3010YOUR_API_KEY\u3011&sensor=SET_TO_TRUE_OR_FALSE"><\/script><\/pre>\n
    5\uff09API \u306e\u975e\u540c\u671f\u8aad\u307f\u8fbc\u307f<\/h4>\n
    function initialize() {\r\nvar mapOptions = {\r\nzoom: 8,\r\ncenter: new google.maps.LatLng(-34.397, 150.644),\r\nmapTypeId: google.maps.MapTypeId.ROADMAP\r\n}\r\nvar map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);\r\n}\r\n\r\nfunction loadScript() {\r\nvar script = document.createElement("script");\r\nscript.type = "text\/javascript";\r\nscript.src = "http:\/\/maps.googleapis.com\/maps\/api\/js?key=\u3010YOUR_API_KEY\u3011&sensor=TRUE_OR_FALSE&callback=initialize";\r\ndocument.body.appendChild(script);\r\n}\r\n\r\nwindow.onload = loadScript;<\/pre>\n
    6\uff09\u5730\u56f3\u306e DOM \u8981\u7d20<\/h4>\n
    \u5730\u56f3\u3092\u30a6\u30a7\u30d6\u30da\u30fc\u30b8\u306b\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u9818\u57df\u3092\u7528\u610f\u3002\u3053\u3053\u3067\u306fmap_canvas\u3068\u8a00\u3046ID\u3092\u8a2d\u5b9a\u3002<\/p>\n
    <div id="map_canvas"><\/div><\/pre>\n
    7\uff09\u5730\u56f3\u306e\u30aa\u30d7\u30b7\u30e7\u30f3<\/h4>\n
    var mapOptions = {\r\ncenter: new google.maps.LatLng(-34.397, 150.644),\r\nzoom: 8,\r\nmapTypeId: google.maps.MapTypeId.ROADMAP\r\n};<\/pre>\n
    \u5730\u56f3\u3092\u521d\u671f\u5316\u3059\u308b\u305f\u3081\u306b\u5730\u56f3\u306e\u521d\u671f\u5316\u5909\u6570<\/p>\n
    var mapOptions = {};<\/pre>\n
    8\uff09\u7def\u5ea6\u3068\u7d4c\u5ea6<\/h4>\n
    \u4f4d\u7f6e\u306e\u5ea7\u6a19\u3092 {\u7def\u5ea6, \u7d4c\u5ea6} \u306e\u9806\u5e8f<\/strong>\u3067\u6e21\u3059<\/p>\n
    center = new google.maps.LatLng(-34.397, 150.644)<\/pre>\n
    \"geocoding\"<\/a>Geocoding – \u4f4f\u6240\u304b\u3089\u7def\u5ea6\u7d4c\u5ea6\u3092\u691c\u7d22<\/a><\/strong><\/p>\n
    9\uff09\u30ba\u30fc\u30e0 \u30ec\u30d9\u30eb<\/h4>\n
    \u5730\u56f3\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306e\u6700\u521d\u306e\u89e3\u50cf\u5ea6\u306f\u3001zoom \u30d7\u30ed\u30d1\u30c6\u30a3\u3067\u8a2d\u5b9a<\/p>\n
    zoom: 8<\/pre>\n
    10\uff09\u30de\u30c3\u30d7 \u30bf\u30a4\u30d7<\/h4>\n
    \u521d\u671f\u30de\u30c3\u30d7 \u30bf\u30a4\u30d7\u3082\u660e\u793a\u7684\u306b\u8a2d\u5b9a<\/p>\n
    mapTypeId: google.maps.MapTypeId.ROADMAP<\/pre>\n