{"id":7838,"date":"2015-10-31T05:07:27","date_gmt":"2015-10-31T05:07:27","guid":{"rendered":"https:\/\/unknownerror.org\/index.php\/2015\/10\/31\/allenhwkim-angularjs-google-maps\/"},"modified":"2015-10-31T05:07:27","modified_gmt":"2015-10-31T05:07:27","slug":"allenhwkim-angularjs-google-maps","status":"publish","type":"post","link":"https:\/\/unknownerror.org\/index.php\/2015\/10\/31\/allenhwkim-angularjs-google-maps\/","title":{"rendered":"allenhwkim\/angularjs-google-maps"},"content":{"rendered":"

<\/p>\n

Demo
\nDocumentation
\nRoad Trip By StreetView<\/strong><\/p>\n

There is already one for this. However, I found myself doing totally different approach for this purpose than the existing one, such as;<\/p>\n

    \n
  1. Everything in tag and attributes.<\/strong>
    \nThus, basic users don\u2019t even have to know what Javascript is.<\/li>\n
  2. Expose all original Google Maps V3 api to the user.<\/strong>
    \nNo hiding, no wraping, or whatsoever. By doing so, programmers don\u2019t need to learn how to use this module. You only need to know Google Maps V3 API.<\/li>\n<\/ol>\n

    There is a blog that introduces this module. The title of it is \u2019Google Map As The Simplest Way\u2019<\/p>\n

    To Get Started<\/h2>\n

    For Bower users,<\/p>\n

    $ bower install ngmap<\/code><\/p>\n

      \n
    1. \n

      Include ng-map.min.js<\/code> as well as google maps.<\/p>\n<\/li>\n

    2. \n

      name angular app as ngMap, or add it as a dependency<\/p>\n

      var myApp = angular.module('myApp', ['ngMap']);<\/code><\/p>\n<\/li>\n<\/ol>\n

      After map is initialized, you will have one event and map instances<\/p>\n

      Event:<\/p>\n

        \n
      • \n

        mapInitialized<\/code> with parameter with map<\/p>\n

        In case your map directive scope is different from your controller scope, use this event to get the map instance.<\/p>\n

        \napp.controller(\u2018parentParentController\u2019, function($scope) {\n$scope.$on(\u2018mapInitialized\u2019, function(event, map) {\nmap.setCenter( \u2026 )\n\u2026\n});\n});\n<\/pre>\n<\/li>\n<\/ul>\n
        Instances:<\/p>\n
          \n
        • $scope.map<\/code><\/li>\n
        • $scope.map.markers<\/code><\/li>\n
        • $scope.map.shapes<\/code><\/li>\n
        • etc<\/li>\n<\/ul>\n
          Lazy Loading<\/h2>\n
          Simply wrap the map tag with map-lazy-load=\"http:\/\/maps.google.com\/maps\/api\/js\"<\/code>.<\/p>\n
          \n  \n\n<\/code><\/pre>\n
          Release Notes<\/h2>\n
          1.7.0<\/strong><\/p>\n
            \n
          • added directions<\/strong> directive Example<\/li>\n
          • added places-auto-complete<\/strong> for input tag. Example<\/li>\n<\/ul>\n
            1.6.0<\/strong><\/p>\n
            1.5.0<\/strong><\/p>\n
              \n
            • added geo-callback attribute<\/strong> for map, marker, shape, and info-window. Example<\/li>\n<\/ul>\n
              1.4.0<\/strong><\/p>\n
                \n
              • support lazy loading of maps js with directive, map-lazy-load<\/strong>, which does not require to https:\/\/maps.google.com\/maps\/api\/js<\/code> Example<\/li>\n<\/ul>\n
                1.3.0<\/strong><\/p>\n
                  \n
                • added drawing-manager<\/strong> directive. Thanks to Fangming Du Example<\/li>\n<\/ul>\n
                  1.2.0<\/strong><\/p>\n
                    \n
                  • events with controller as<\/code> syntax, thanks to Simon<\/li>\n<\/ul>\n
                    1.1.0<\/strong><\/p>\n
                      \n
                    • marker directive can have icon attribute as JSON<\/li>\n
                    • map with init-event attribute for initialization by an event<\/li>\n<\/ul>\n
                      1.0.0 (covers all official google examples using directives).<\/strong><\/p>\n
                        \n
                      • \n
                        marker<\/p>\n<\/li>\n
                      • \n
                        shapes<\/p>\n
                          \n
                        • circle<\/li>\n
                        • polyline<\/li>\n
                        • polygon<\/li>\n
                        • rectangle<\/li>\n
                        • image<\/li>\n<\/ul>\n<\/li>\n
                        • \n
                          layers<\/p>\n
                            \n
                          • traffic-layer<\/li>\n
                          • transit-layer<\/li>\n
                          • bicycling-layer<\/li>\n
                          • dynamic-maps-engine-layer<\/li>\n
                          • fusion-tables-layer<\/li>\n
                          • heatmap-layer<\/li>\n
                          • kml-layer<\/li>\n
                          • maps-engine-layer<\/li>\n<\/ul>\n<\/li>\n
                          • \n
                            custom-control<\/p>\n<\/li>\n
                          • \n
                            info-window<\/p>\n<\/li>\n
                          • \n
                            map-data<\/p>\n<\/li>\n
                          • \n
                            map-type<\/p>\n<\/li>\n
                          • \n
                            overlay-map-type<\/p>\n<\/li>\n<\/ul>\n
                            Directives<\/h2>\n
                            As defined on MapOptions, you can add any attributes, and events starting witn on-<\/code>. Please note that event value must be a function.<\/p>\n
                            Example:<\/p>\n
                            \n\n<\/code><\/pre>\n
                            i.e. < zoom=\u201c11\u201d center=”[40.74, -74.18]”<\/p>\n
                            As defined on MarkerOptions, you can add any attributes, and events starting witn on-<\/code>.<\/p>\n
                            \n  \n\n<\/code><\/pre>\n
                            Polyline, Circle, Polygon, Rectangle, and Images<\/p>\n
                             \n    \n    \n    \n    \n    \n \n<\/code><\/pre>\n
                            Example:<\/p>\n
                            \n  \n    \n      \n    \n  \n\n<\/code><\/pre>\n
                            Example:<\/p>\n
                              \n    \n      Home1\n    \n  \n<\/code><\/pre>\n
                            Example:<\/p>\n
                              \n    \n  \n<\/code><\/pre>\n
                            Layer Directives<\/h3>\n
                              \n    \n  \n<\/code><\/pre>\n
                            (deprecated) and (deprecated)<\/h4>\n
                              \n    \n    \n  \n<\/code><\/pre>\n
                              \n    \n    \n  \n<\/code><\/pre>\n
                              \n    \n  \n<\/code><\/pre>\n
                              \n    \n    \n  \n<\/code><\/pre>\n
                              \n    \n  \n<\/code><\/pre>\n
                              \n    \n  \n<\/code><\/pre>\n
                              \n    \n    \n  \n<\/code><\/pre>\n
                              \n    \n  \n<\/code><\/pre>\n
                            MapType Directives<\/h3>\n","protected":false},"excerpt":{"rendered":"
                            Demo Documentation Road Trip By StreetView There is already one for this. However, I found myself doing totally different approach for this purpose than the existing one, such as; Everything in tag and attributes. Thus, basic users don\u2019t even have to know what Javascript is. Expose all original Google Maps V3 api to the user. […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-7838","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7838","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/comments?post=7838"}],"version-history":[{"count":0,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/posts\/7838\/revisions"}],"wp:attachment":[{"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/media?parent=7838"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/categories?post=7838"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/unknownerror.org\/index.php\/wp-json\/wp\/v2\/tags?post=7838"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}