Google Maps API 101
•
0 recomendaciones•858 vistas
Slides from the GDG Black Forest Workshop 'Google Maps API 101'
Recomendados
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (13)
Destacado
Destacado (20)
Similar a Google Maps API 101
Similar a Google Maps API 101 (20)
Último
Último (20)
Google Maps API 101
- 1. Google Maps API 101 Sebastian Roming GDG Black Forest
- 2. What do I need? - your favourite IDE - Access to the Internet That’s all!
- 4. Resources -
- 5. Basics Loading Maps API to your website: <script src='https://maps.googleapis.com/maps/api/js?sensor=false'> </script> Create a Map Container <div id='mapContainer'></div>
- 6. Basics <script> var mapObject; function initMap() { mapObject = new google.maps.Map( document.getElementById ('mapContainer'), { center: new google.maps.LatLng(48.210, 8.515), zoom: 14 }); } google.maps.event.addDomListener(window, 'load', initMap); </script> Our Map Container
- 7. <!DOCTYPE html> <html> <head> <meta charset ='utf-8'> <title> Google Maps API 101 - Example 1 </title> <script src='https://maps.googleapis.com/maps/api/js?sensor=false '></script> <style> #mapContainer { width:800px; height:400px; } </style> </head> <body> <div id='mapContainer '></div> <script> var mapObject; function initMap () { mapObject = new google.maps.Map(document.getElementById ('mapContainer '), { center: new google.maps.LatLng (48.210 , 8.515), zoom: 14 }); } google.maps.event.addDomListener (window, ' load', initMap ); </script> </body> </html> Working!
- 8. Extend Adding a marker to the map var marker = new google.maps.Marker({ position: new google.maps.LatLng(48.210, 8.515), map: mapObject });
- 9. Features - Map styling - Custom shapes / markers - StreetView - Places - Geocoding - many, many more...
- 10. Style your map - Adding / removing controls - Positioning the controls - Adding overlays - … Be creative, everything is possible!
- 11. Translate address to coordinates (or vice versa) var geocoder = new google.maps.Geocoder(); [...] Sends request and gets google.maps. GeocoderStatus and a result (if there is one). Geocoding
- 12. DrawingManager Can draw shapes and markers var drawing = new google.maps.drawing.DrawingManager({ drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER } });
- 13. Need to know Object google.maps = 42!
- 14. Want more? Gentlemen, start your IDE. Let´s code.
- 15. Thank you. @sebastianroming github.com/sebastianroming github.com/GDGBlackForest