google maps api 101
TRANSCRIPT
![Page 1: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/1.jpg)
Google Maps API 101Sebastian RomingGDG Black Forest
![Page 2: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/2.jpg)
What do I need?
- your favourite IDE- Access to the Internet
That’s all!
![Page 3: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/3.jpg)
http://developers.google.com
![Page 4: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/4.jpg)
Resources
-
![Page 5: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/5.jpg)
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>
![Page 6: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/6.jpg)
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
![Page 7: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/7.jpg)
<!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!
![Page 8: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/8.jpg)
Extend
Adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(48.210, 8.515),
map: mapObject
});
![Page 9: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/9.jpg)
Features
- Map styling- Custom shapes / markers- StreetView- Places- Geocoding- many, many more...
![Page 10: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/10.jpg)
- Adding / removing controls- Positioning the controls- Adding overlays- …
Be creative, everything is possible!
Style your map
![Page 11: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/11.jpg)
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
![Page 12: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/12.jpg)
DrawingManager
Can draw shapes and markers
var drawing = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
}
});
![Page 13: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/13.jpg)
Need to know
Object google.maps = 42!
![Page 14: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/14.jpg)
Want more?
Gentlemen, start your IDE.Let´s code.
![Page 15: Google Maps API 101](https://reader033.vdocuments.mx/reader033/viewer/2022042522/55a5b0ea1a28ab937b8b45a2/html5/thumbnails/15.jpg)
@sebastianrominggithub.com/sebastianrominggithub.com/GDGBlackForest
Thank you.