Google Maps API 101 Sebastian Roming GDG Black Forest
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Google Maps API 101Sebastian RomingGDG Black Forest
What do I need?
- your favourite IDE- Access to the Internet
That’s all!
http://developers.google.com
Resources
-
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>
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
<!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!
Extend
Adding a marker to the map
var marker = new google.maps.Marker({
position: new google.maps.LatLng(48.210, 8.515),
map: mapObject
});
Features
- Map styling- Custom shapes / markers- StreetView- Places- Geocoding- many, many more...
- Adding / removing controls- Positioning the controls- Adding overlays- …
Be creative, everything is possible!
Style your map
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
DrawingManager
Can draw shapes and markers
var drawing = new google.maps.drawing.DrawingManager({
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER
}
});
Need to know
Object google.maps = 42!
Want more?
Gentlemen, start your IDE.Let´s code.
@sebastianrominggithub.com/sebastianrominggithub.com/GDGBlackForest
Thank you.
Related Documents
