Created
May 31, 2013 13:32
-
-
Save ZogStriP/5684983 to your computer and use it in GitHub Desktop.
How to use Google Maps with Ember.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Works really great, thanks!
You can add a listener inside didInsertElement to detect resize window and center the marker:
google.maps.event.addDomListener(window, 'resize', function() {
map.setCenter(center);
});
cheers
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Hi
I have just copied your example and applied in some context . But there is a small problem
How does did insert element works coz in my project the template that i want to insert the map is extending the base.html
example of the code
{% block pane %}
then I have written your template code
{% endblock %}
The map is rendered at the bottom of the html file
By the way am using django