4. Installation
1. $ react-native init --version=“0.35.0” l9_map
2. $ npm install react-native-maps --save
3. $ react-native link
4. Write some code
5. $ react-native run-ios
6. For Android, we have extra steps.
5. Android Installation Extra
Steps.
1. Google Map need an API key
2. You can get your own at https://
console.developers.google.com or using my API
key. >>
AIzaSyCKspSGmpYn3GxZfIc_Sccu7x-8qXQcZkI
3. Add the Google Map’s API key at
androidappsrcmainAndroidManifest.xml
4. $ react-native run-android
6. Adding Google API key
Add meta-data tag as shown below, between <application>
tag in AndroidManifest.xml
7. Adding Basic Map Code
l9_map_1
You can see full l9_map_1 source code at the end of lecture note (A4)
8. First try!
1. $ react-native run-ios
2. Empty screen come up!?
why!?
3. Map need the width,
height. Can not use flex:1
here… :(
l9_map_1
9. Adding Width,Height to Map
l9_map_2Full l9_map_2 source code at the end of lecture note
• Dimensions return current screen’s
width and height.
• Dimensions.get(‘windows’).width
• Dimensions.get(‘windows’).height
• Thus, the map will be full screen.
10. 1. Welcome to San Francisco, the
home of tech companies in the world.
2. At the center point of the screen is
<37.78825, -122.4324>
3. The zoom of the map is specify by
*Delta.
4. At the Equator
1 LatitudeDelta => 110.57 KM
1 LongitudeDelta => 111.32 KM
0.0922 latDelta
0.0421 longDelta
(37.78825, -122.4324)
l9_map_2
11. Make it controllable by State
l9_map_3
Instead of, the fixed regions, we make it as a state.
12. Make it controllable by State #2
l9_map_3
• onRegionChange props will be called when the location/zoom
are changed, with the value of new location/zoom (region)
• Region props defined the current location/zoom in the map.
13. 1. Drag on map view to move
the map.
2. Once drag, this.state.region
was updated by
onRegionChanged().
3. Text at the lower third of the
screen is updated according
to the this.state.region
4.Try two fingers pinch, to
zoom, to rotate the map. In
simulator, press alt(option)
button to two fingers pinch.
l9_map_3
14. Configure the MapView
And much more..
https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md
15. MapEvents are also catchable
And much more..
https://github.com/airbnb/react-native-maps/blob/master/docs/mapview.md
17. Let’s change the mapType
mapType=“hybrid” mapType=“satellite” mapType=“terrain”
l9_map_4
Android only
18. Adding Map Markerl9_map_5
Let move the location to the Victory
Monument, Bangkok, Thailand.
MapView.Marker
coordinate => LatLng Object of that
marker
title => Title of Information popup
description => Description of popup
19. 1. MapView.Marker creates a red-
pin marker on the map (for Apple
map), and droplet shape pin on
Google map. Place it as children
of the MapView.
2.Touch the pin to show up the
popup windows, touch elsewhere
to hide it.
3. The map is draggable.
4.You can add many markers you
want.
Google Map
Apple Map l9_map_5
22. Don’t forget to add “key”
We found that there are warnings below…
It will occur every time, when we use JSX under loop.
To remove it, Add key props.
To distinguish each MapView.Marker
from others.
l9_map_6
37. Travel Directory App
• Center map at the Victory
Monument
• Map can be moved.
• Tap on icon, show Title and
Description
• Push buttons to move the map
to that specific location and
zoom in and open the call out.
• Starting to modify the app from
l9_map_7
App Requirements
l9_map_travel
44. The Change is so sudden!
• I want to make it smoothly animate to the new location!
• MapView have a method for that called “animateToRegion”
• They accept 2 arguments, i.e., Region to move to, and, How long
does the animation will need (in ms).
l9_map_travel_smooth
45. How to reference to the
MapView (Ref)
• How we can reference to our UI in react?
• Luckily, we have Ref System!
• We can have ref props in any component, e.g.,
<MapView ref=“map” … >
• We can reference to the MapView Component by
accessing this.ref.map
l9_map_travel_smooth
46. l9_map_travel_smooth
• We move to the new location as specified in latlng.
• And zoom in,
• smoothly in 3 seconds (3000 ms)
48. HW: How to automatically open
call out when pressing a button?
• There is a method call “showCallout()” in MapView.Marker
• Use Ref!
• This is your homework!
https://github.com/airbnb/react-native-maps/blob/master/docs/marker.md