iRonin/ember.js-with-google-maps.html

## ember.js-with-google-maps.html
<!DOCTYPE html>
<html>
<head>
  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.3/ember.js"></script>
  <script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
  <script>
    window.App = Ember.Application.create();

    App.MapWithCoordinatesView = Ember.View.extend({
      templateName: "map-with-coordinates"
    });

    App.MapView = Ember.View.extend({
      didInsertElement: function() {
        // this is required for the map to be rendered
        this.$().css({ width: "500px", height: "200px" });
        // create the LatLng object that will be used to center both the map and the marker
        var center = new google.maps.LatLng(this.get("latitude"),this.get("longitude"));
        // some options
        var options = {
          disableDefaultUI: true,
          center: center,
          zoom: 15,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        // create the map
        var map = new google.maps.Map(this.$()[0], options);
        // create the marker
        var marker = new google.maps.Marker({ position: center, map: map, draggable: true });
        // save them both for later use
        this.set("marker", marker);
        this.set("map", map);
        var that = this;
        // add a listener on the "drag" event of the marker
        google.maps.event.addListener(marker, "drag", function() {
          // retrieve the current position of the marker
          var position = marker.getPosition();
          // update the latitude/longitude properties
          that.setProperties({
            latitude: position.lat(),
            longitude: position.lng()
          });
        });
        // listeners used to know when we're dragging
        google.maps.event.addListener(marker, "dragstart", function() { that.set("dragging", true); });
        google.maps.event.addListener(marker, "dragend", function() { that.set("dragging", false); });
      },

      willDestroyElement: function() {
        // make sure we clear all listeners
        google.maps.event.clearInstanceListeners(this.get("marker"));
      },

      coordinatesChanged: function() {
        // create a new position object from the marker's position
        var position = new google.maps.LatLng(this.get("latitude"), this.get("longitude"));
        // only center the map when the position has been changed by changing the textfields
        if (!this.get("dragging")) { this.get("map").setCenter(position); }
        // update the position of the marker
        this.get("marker").setPosition(position);
      }.observes("latitude", "longitude")
    });
  </script>
  <script type="text/x-handlebars">
    {{view App.MapWithCoordinatesView latitude="42.63913" longitude="3.022150"}}
  </script>
  <script type="text/x-handlebars" data-template-name="map-with-coordinates">
    {{view App.MapView latitudeBinding="view.latitude" longitudeBinding="view.longitude" altitudeBinding="view.altitude"}}
    {{view Ember.TextField valueBinding="view.latitude"}}
    {{view Ember.TextField valueBinding="view.longitude"}}
    {{view Ember.TextField valueBinding="view.altitude"}}
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.3/ember.js"></script>
	<script src="//maps.googleapis.com/maps/api/js?sensor=false"></script>
	</head>
	<body>
	<script>
	window.App = Ember.Application.create();

	App.MapWithCoordinatesView = Ember.View.extend({
	templateName: "map-with-coordinates"
	});

	App.MapView = Ember.View.extend({
	didInsertElement: function() {
	// this is required for the map to be rendered
	this.$().css({ width: "500px", height: "200px" });
	// create the LatLng object that will be used to center both the map and the marker
	var center = new google.maps.LatLng(this.get("latitude"),this.get("longitude"));
	// some options
	var options = {
	disableDefaultUI: true,
	center: center,
	zoom: 15,
	mapTypeId: google.maps.MapTypeId.ROADMAP
	};
	// create the map
	var map = new google.maps.Map(this.$()[0], options);
	// create the marker
	var marker = new google.maps.Marker({ position: center, map: map, draggable: true });
	// save them both for later use
	this.set("marker", marker);
	this.set("map", map);
	var that = this;
	// add a listener on the "drag" event of the marker
	google.maps.event.addListener(marker, "drag", function() {
	// retrieve the current position of the marker
	var position = marker.getPosition();
	// update the latitude/longitude properties
	that.setProperties({
	latitude: position.lat(),
	longitude: position.lng()
	});
	});
	// listeners used to know when we're dragging
	google.maps.event.addListener(marker, "dragstart", function() { that.set("dragging", true); });
	google.maps.event.addListener(marker, "dragend", function() { that.set("dragging", false); });
	},

	willDestroyElement: function() {
	// make sure we clear all listeners
	google.maps.event.clearInstanceListeners(this.get("marker"));
	},

	coordinatesChanged: function() {
	// create a new position object from the marker's position
	var position = new google.maps.LatLng(this.get("latitude"), this.get("longitude"));
	// only center the map when the position has been changed by changing the textfields
	if (!this.get("dragging")) { this.get("map").setCenter(position); }
	// update the position of the marker
	this.get("marker").setPosition(position);
	}.observes("latitude", "longitude")
	});
	</script>
	<script type="text/x-handlebars">
	{{view App.MapWithCoordinatesView latitude="42.63913" longitude="3.022150"}}
	</script>
	<script type="text/x-handlebars" data-template-name="map-with-coordinates">
	{{view App.MapView latitudeBinding="view.latitude" longitudeBinding="view.longitude" altitudeBinding="view.altitude"}}
	{{view Ember.TextField valueBinding="view.latitude"}}
	{{view Ember.TextField valueBinding="view.longitude"}}
	{{view Ember.TextField valueBinding="view.altitude"}}
	</script>
	</body>
	</html>