Skip to content

Instantly share code, notes, and snippets.

@adambarthelson

adambarthelson/gmap-directive.js

Created June 11, 2014 00:48
Download ZIP

Revisions

  1. Adam Barthelson created this gist Jun 11, 2014.
    39 changes: 39 additions & 0 deletions gmap-directive.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,39 @@
    app.directive("gmap", function() {
    return {
    restrict: "E",
    scope: false,
    replace: false,
    templateUrl: "map.html",
    link: function(scope){
    map = new GMaps({
    div: '#map',
    lat: scope.latitude,
    lng: scope.longitude
    });
    map.addMarker({
    lat: scope.latitude,
    lng: scope.longitude
    });
    $('#geocoding_form').submit(function(e){
    e.preventDefault();
    GMaps.geocode({
    address: $('#address').val().trim(),
    callback: function(results, status){
    if(status=='OK'){
    var latlng = results[0].geometry.location;
    map.setCenter(latlng.lat(), latlng.lng());
    map.addMarker({
    lat: latlng.lat(),
    lng: latlng.lng()
    });
    scope.$apply(function(){
    scope.latitude = latlng.lat();
    scope.longitude = latlng.lng();
    });
    }
    }
    })
    });
    }
    }
    });
    8 changes: 8 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    ... HTML/CSS Stuff...
    ... ng-app stuff...

    <gmap></gmap>

    <!--Google Maps-->
    <script src='//maps.googleapis.com/maps/api/js?sensor=true'></script>
    <script src='bower_components/gmaps/gmaps.js'></script>
    9 changes: 9 additions & 0 deletions map.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    <form method="post" id="geocoding_form">
    <label for="address">Address:</label>
    <div class="input">
    <input type="text" id="address" name="address" />
    <input type="submit" class="btn" value="Search" />
    </div>
    </form>

    <div id="map"></div>