{"id":561,"date":"2019-01-12T13:39:22","date_gmt":"2019-01-12T20:39:22","guid":{"rendered":"https:\/\/rosolutions.com.mx\/blog\/?p=561"},"modified":"2019-04-16T14:20:10","modified_gmt":"2019-04-16T21:20:10","slug":"como-agregar-mapas-en-react-native-tutorial","status":"publish","type":"post","link":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/","title":{"rendered":"\u00bfC\u00f3mo agregar mapas en React Native? – Tutorial"},"content":{"rendered":"

El presente tutorial es para ense\u00f1ar como integrar Google Maps en una aplicaci\u00f3n de React Native, para ello usaremos una muy buena librer\u00eda llamada\u00a0react-native-maps<\/a>, sin m\u00e1s que decir comenzemos.<\/p>\n

Instalar librer\u00eda<\/h1>\n

Para iniciar corre el siguiente comando en la carpeta ra\u00edz del proyecto.<\/p>\n

npm install<\/span> react-native-maps --save<\/span>\r\n<\/pre>\n
Esto agregar\u00e1 todas las dependencias necesarias en la carpeta\u00a0react-native-maps<\/code>\u00a0dentro de\u00a0 \u00a0node_module<\/code>.<\/p>\n
Ahora simplemente enlace la librer\u00eda. Para ello corre el suiguiente comando:<\/p>\n
react-native link<\/span> react-native-maps\u00a0\r\n<\/pre>\n
Debido a ciertos fallos en la librer\u00eda hay que hacer unos arreglos tanto en Android como en iOS.<\/p>\n
Arreglos en Android<\/h2>\n
Primero de todo se debe localizar la carpeta android. Dicha carpeta deber\u00eda estar en la ra\u00edz del proyecto.<\/p>\n
Yo en lo personal prefiero mover los archivos en el compilador nativo, en este caso Android Studio.<\/p>\n
Si eres como realiza los siguientes pasos:<\/p>\n
    \n
  1. Abre Android Studio<\/li>\n
  2. Da click en\u00a0“Open an existing Android Studio project”<\/li>\n
  3. Localiza la carpeta “android” del proyecto<\/li>\n
  4. Dale en “OK” y listo<\/li>\n<\/ol>\n
    Localiza el archivo\u00a0app > build.gradle<\/strong> y \u00e1brelo.<\/p>\n
    Despl\u00e1zate hacia abajo en la secci\u00f3n de “dependencies” y busca una l\u00ednea parecida a la siguiente, si no la encuentras agr\u00e9gala.<\/p>\n
    implementation project(<\/span>':react-native-maps'<\/span>)<\/span>\r\n<\/pre>\n
    Si en lugar de implementation dice compile igual esta bien pero estar\u00edas usando librer\u00edas de Gradle obsoletas.<\/p>\n
    Localiza el archivo\u00a0settings.gradle<\/strong> y \u00e1brelo.<\/p>\n
    De igual manera debe de incluir las siguiente l\u00edneas:<\/p>\n
    include ':react-native-maps'<\/span>\r\nproject(<\/span>':react-native-maps'<\/span>)<\/span>.projectDir<\/span> =<\/span> new<\/span> File<\/span>(<\/span>rootProject.projectDir<\/span>, \r\n    '..\/node_modules\/react-native-maps\/lib\/android'<\/span>)<\/span>\r\n<\/pre>\n
    En la carpeta\u00a0app > src > main > java<\/strong> localiza el archivo\u00a0MainApplication.java<\/strong> y \u00e1brelo.<\/p>\n
    Deber\u00eda incluir algo parecido a lo siguiente:<\/p>\n
    @Override<\/span>\r\nprotected<\/span> List<\/span><<\/span>ReactPackage><\/span> getPackages(<\/span>)<\/span> {<\/span>\r\n    return<\/span> Arrays<\/span>.asList<\/span>(<\/span>\r\n            new<\/span> MainReactPackage(<\/span>)<\/span>,\r\n            new<\/span> MapsPackage(<\/span>)<\/span>\r\n    )<\/span>;<\/span>\r\n}<\/span>\r\n<\/pre>\n
    Obt\u00e9n la clave de la API. Para ello sigue el tutorial oficial<\/a>.<\/p>\n
    Una vez hecho eso agrega la clave al proyecto.<\/p>\n
    Para ello abre el archivo\u00a0app > src > main > AndroidManifest.xml<\/strong>\u00a0y agrega lo siguiente:<\/p>\n
    <meta-data<\/span><\/span>\r\n    android:name<\/span>=\"com.google.android.geo.API_KEY\"<\/span><\/span>\r\n    android:value<\/span>=\"Cambiar_por_tu_Clave_API\"<\/span> \/><\/span><\/span>\r\n<\/pre>\n
    Y Listo.<\/p>\n
    Arreglos en iOS<\/h2>\n
    OJO los siguientes arreglos se deben realizar en una computadora mac.<\/p>\n
    Primero de todo se debe localizar la carpeta ios y abre la terminal en la misma.<\/p>\n
    Si la carpeta no incluye un archivo Podfile corre el siguiente comando:<\/p>\n
    pod init\r\n<\/pre>\n
    Abre el archivo para edici\u00f3n y c\u00e1mbialo a lo siguiente:<\/p>\n
    \n
    # Uncomment the next line to define a global platform for your project<\/span>\r\n# platform :ios, '9.0'<\/span>\r\n\u00a0\r\ntarget '_YOUR_PROJECT_TARGET_'<\/span> do<\/span>\r\n  rn_path = '..\/node_modules\/react-native'<\/span>\r\n  rn_maps_path = '..\/node_modules\/react-native-maps'<\/span>\r\n\u00a0\r\n  pod 'yoga'<\/span>, path: \"#{rn_path}\/ReactCommon\/yoga\/yoga.podspec\"<\/span>\r\n  pod 'React'<\/span>, path: rn_path, subspecs: [<\/span>\r\n    'Core'<\/span>,\r\n    'CxxBridge'<\/span>,\r\n    'DevSupport'<\/span>,\r\n    'RCTActionSheet'<\/span>,\r\n    'RCTAnimation'<\/span>,\r\n    'RCTGeolocation'<\/span>,\r\n    'RCTImage'<\/span>,\r\n    'RCTLinkingIOS'<\/span>,\r\n    'RCTNetwork'<\/span>,\r\n    'RCTSettings'<\/span>,\r\n    'RCTText'<\/span>,\r\n    'RCTVibration'<\/span>,\r\n    'RCTWebSocket'<\/span>,\r\n  ]<\/span>\r\n\u00a0\r\n  # React Native third party dependencies podspecs<\/span>\r\n  pod 'DoubleConversion'<\/span>, :podspec =><\/span> \"#{rn_path}\/third-party\r\n      podspecs\/DoubleConversion.podspec\"<\/span>\r\n  pod 'glog'<\/span>, :podspec =><\/span> \"#{rn_path}\/third-party-podspecs\/glog.podspec\"<\/span>\r\n  # If you are using React Native <0.54, you will get the following error:<\/span>\r\n  # \"The name of the given podspec `GLog` doesn't match the expected one `glog`\"<\/span>\r\n  # Use the following line instead:<\/span>\r\n  #pod 'GLog', :podspec => \"#{rn_path}\/third-party-podspecs\/GLog.podspec\"<\/span>\r\n  pod 'Folly'<\/span>, :podspec =><\/span> \"#{rn_path}\/third-party-podspecs\/Folly.podspec\"<\/span>\r\n\u00a0\r\n  # react-native-maps dependencies<\/span>\r\n  pod 'react-native-maps'<\/span>, path: rn_maps_path\r\n  pod 'react-native-google-maps'<\/span>, path: rn_maps_path\r\n  pod 'GoogleMaps'<\/span>\r\n  pod 'Google-Maps-iOS-Utils'<\/span>\r\nend\r\n\u00a0\r\npost_install do<\/span> |<\/span>installer|<\/span>\r\n  installer.pods_project.targets.each do<\/span> |<\/span>target|<\/span>\r\n    if<\/span> target.name == 'react-native-google-maps'<\/span>\r\n      target.build_configurations.each do<\/span> |<\/span>config|<\/span>\r\n        config.build_settings[<\/span>'CLANG_ENABLE_MODULES'<\/span>]<\/span> = 'No'<\/span>\r\n      end\r\n    end\r\n    if<\/span> target.name == \"React\"<\/span>\r\n      target.remove_from_project\r\n    end\r\n  end\r\nend<\/pre>\n
    Ahora en la terminal corre el siguiente comando:<\/p>\n<\/div>\n
    pod install\r\n<\/pre>\n
    Abre el proyecto en Xcode, pare ello sigue los siguientes pasos:<\/div>\n
    <\/div>\n
      \n
    1. Abre Xcode<\/li>\n
    2. Da click en\u00a0“Open another project”<\/li>\n
    3. Localiza la carpeta “ios” del proyecto<\/li>\n
    4. Dale en “open” y listo<\/li>\n<\/ol>\n
      Procediendo obt\u00e9n la clave de la API. Para ello sigue el tutorial oficial<\/a>.<\/p>\n
      En la subcarpeta principal (mismo nombre que la principal) abre el archivo AppDelegate.m<\/strong>.<\/p>\n
      Agrega la siguiente l\u00ednea en la secci\u00f3n de librer\u00edas:<\/p>\n
      #import <GoogleMaps\/GoogleMaps.h><\/span><\/pre>\n
      Posteriormente en el mismo archivo agrega:<\/p>\n
      ...<\/span>\r\n\u00a0\r\n-<\/span> (<\/span>BOOL<\/span>)<\/span>application:<\/span>(<\/span>UIApplication *<\/span>)<\/span>application\r\ndidFinishLaunchingWithOptions:<\/span>(<\/span>NSDictionary *<\/span>)<\/span>launchOptions\r\n{<\/span>\r\n+<\/span>  [<\/span>GMSServices provideAPIKey:<\/span>@\"Cambiar_por_tu_Clave_API\"<\/span>]<\/span>;<\/span>\r\n...<\/span><\/pre>\n
      Y Listo.<\/p>\n
      Siguientes pasos<\/h1>\n
      Para saber m\u00e1s de como usar el mapa en el c\u00f3digo JavaScript sigue la documentaci\u00f3n oficial<\/a> o espera los siguientes tutoriales que se basar\u00e1n en el uso del mapa, como agregar marcadores y callouts, como interactuar, etc\u00e9tera.<\/p>\n","protected":false},"excerpt":{"rendered":"
      El presente tutorial es para ense\u00f1ar como integrar Google Maps en una aplicaci\u00f3n de React Native, para ello usaremos una muy buena librer\u00eda llamada\u00a0react-native-maps, sin m\u00e1s que decir comenzemos. Instalar librer\u00eda Para iniciar corre el siguiente comando en la carpeta ra\u00edz del proyecto. npm install react-native-maps –save Esto agregar\u00e1 todas las dependencias necesarias en la […]<\/p>\n","protected":false},"author":12,"featured_media":591,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35,4,7,34],"tags":[10,46,11,47,60],"class_list":["post-561","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desarrollo","category-desarrollo-de-aplicaciones","category-desarrollo-de-software-a-la-medida","category-software","tag-android","tag-android-studio","tag-ios","tag-react-native","tag-xcode"],"yoast_head":"\n\u00bfC\u00f3mo agregar mapas en React Native? - Tutorial — Desarrollo de software<\/title>\n<meta name=\"description\" content=\"Expertos en Desarrollo de Software, Aplicaci\u00f3nes M\u00f3viles, Sistemas Web, SEO, Marketing y Dise\u00f1o Web.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u00bfC\u00f3mo agregar mapas en React Native? - Tutorial — Desarrollo de software\" \/>\n<meta property=\"og:description\" content=\"Expertos en Desarrollo de Software, Aplicaci\u00f3nes M\u00f3viles, Sistemas Web, SEO, Marketing y Dise\u00f1o Web.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/\" \/>\n<meta property=\"og:site_name\" content=\"Desarrollo de software\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/rosolutionsmx\/\" \/>\n<meta property=\"article:published_time\" content=\"2019-01-12T20:39:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-04-16T21:20:10+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"720\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Jorge Jos\u00e9 Valenzuela Mart\u00ednez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@ROSolutionsmx\" \/>\n<meta name=\"twitter:site\" content=\"@ROSolutionsmx\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jorge Jos\u00e9 Valenzuela Mart\u00ednez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/\"},\"author\":{\"name\":\"Jorge Jos\u00e9 Valenzuela Mart\u00ednez\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/person\/21058f79b1f15a79c52bddb4cf8fe925\"},\"headline\":\"\u00bfC\u00f3mo agregar mapas en React Native? – Tutorial\",\"datePublished\":\"2019-01-12T20:39:22+00:00\",\"dateModified\":\"2019-04-16T21:20:10+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/\"},\"wordCount\":491,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg\",\"keywords\":[\"Android\",\"Android Studio\",\"iOS\",\"React Native\",\"XCode\"],\"articleSection\":[\"Desarrollo\",\"Desarrollo m\u00f3vil\",\"Programaci\u00f3n\",\"Software\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/\",\"url\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/\",\"name\":\"\u00bfC\u00f3mo agregar mapas en React Native? - Tutorial — Desarrollo de software\",\"isPartOf\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg\",\"datePublished\":\"2019-01-12T20:39:22+00:00\",\"dateModified\":\"2019-04-16T21:20:10+00:00\",\"description\":\"Expertos en Desarrollo de Software, Aplicaci\u00f3nes M\u00f3viles, Sistemas Web, SEO, Marketing y Dise\u00f1o Web.\",\"breadcrumb\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage\",\"url\":\"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg\",\"contentUrl\":\"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg\",\"width\":1280,\"height\":720,\"caption\":\"react native mapas\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Inicio\",\"item\":\"https:\/\/rosolutions.com.mx\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u00bfC\u00f3mo agregar mapas en React Native? – Tutorial\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#website\",\"url\":\"https:\/\/rosolutions.com.mx\/blog\/\",\"name\":\"Desarrollo de software\",\"description\":\"Blog de RO Solutions\",\"publisher\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/rosolutions.com.mx\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#organization\",\"name\":\"RO Solutions\",\"url\":\"https:\/\/rosolutions.com.mx\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2018\/03\/icono-01-2.png\",\"contentUrl\":\"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2018\/03\/icono-01-2.png\",\"width\":350,\"height\":346,\"caption\":\"RO Solutions\"},\"image\":{\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/rosolutionsmx\/\",\"https:\/\/x.com\/ROSolutionsmx\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/person\/21058f79b1f15a79c52bddb4cf8fe925\",\"name\":\"Jorge Jos\u00e9 Valenzuela Mart\u00ednez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/secure.gravatar.com\/avatar\/f7afbbe5d551726f01e38f65a019ce2a377640f801f97e6c20802fa54a2a349b?s=96&d=mm&r=g\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/f7afbbe5d551726f01e38f65a019ce2a377640f801f97e6c20802fa54a2a349b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/f7afbbe5d551726f01e38f65a019ce2a377640f801f97e6c20802fa54a2a349b?s=96&d=mm&r=g\",\"caption\":\"Jorge Jos\u00e9 Valenzuela Mart\u00ednez\"},\"sameAs\":[\"http:\/\/rosolutions.com.mx\"],\"url\":\"https:\/\/rosolutions.com.mx\/blog\/author\/jorge-valenzuela\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u00bfC\u00f3mo agregar mapas en React Native? - Tutorial — Desarrollo de software","description":"Expertos en Desarrollo de Software, Aplicaci\u00f3nes M\u00f3viles, Sistemas Web, SEO, Marketing y Dise\u00f1o Web.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/","og_locale":"es_MX","og_type":"article","og_title":"\u00bfC\u00f3mo agregar mapas en React Native? - Tutorial — Desarrollo de software","og_description":"Expertos en Desarrollo de Software, Aplicaci\u00f3nes M\u00f3viles, Sistemas Web, SEO, Marketing y Dise\u00f1o Web.","og_url":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/","og_site_name":"Desarrollo de software","article_publisher":"https:\/\/www.facebook.com\/rosolutionsmx\/","article_published_time":"2019-01-12T20:39:22+00:00","article_modified_time":"2019-04-16T21:20:10+00:00","og_image":[{"width":1280,"height":720,"url":"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg","type":"image\/jpeg"}],"author":"Jorge Jos\u00e9 Valenzuela Mart\u00ednez","twitter_card":"summary_large_image","twitter_creator":"@ROSolutionsmx","twitter_site":"@ROSolutionsmx","twitter_misc":{"Escrito por":"Jorge Jos\u00e9 Valenzuela Mart\u00ednez","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#article","isPartOf":{"@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/"},"author":{"name":"Jorge Jos\u00e9 Valenzuela Mart\u00ednez","@id":"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/person\/21058f79b1f15a79c52bddb4cf8fe925"},"headline":"\u00bfC\u00f3mo agregar mapas en React Native? – Tutorial","datePublished":"2019-01-12T20:39:22+00:00","dateModified":"2019-04-16T21:20:10+00:00","mainEntityOfPage":{"@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/"},"wordCount":491,"commentCount":0,"publisher":{"@id":"https:\/\/rosolutions.com.mx\/blog\/#organization"},"image":{"@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg","keywords":["Android","Android Studio","iOS","React Native","XCode"],"articleSection":["Desarrollo","Desarrollo m\u00f3vil","Programaci\u00f3n","Software"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/","url":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/","name":"\u00bfC\u00f3mo agregar mapas en React Native? - Tutorial — Desarrollo de software","isPartOf":{"@id":"https:\/\/rosolutions.com.mx\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage"},"image":{"@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage"},"thumbnailUrl":"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg","datePublished":"2019-01-12T20:39:22+00:00","dateModified":"2019-04-16T21:20:10+00:00","description":"Expertos en Desarrollo de Software, Aplicaci\u00f3nes M\u00f3viles, Sistemas Web, SEO, Marketing y Dise\u00f1o Web.","breadcrumb":{"@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#primaryimage","url":"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg","contentUrl":"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2019\/01\/react.jpg","width":1280,"height":720,"caption":"react native mapas"},{"@type":"BreadcrumbList","@id":"https:\/\/rosolutions.com.mx\/blog\/como-agregar-mapas-en-react-native-tutorial\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Inicio","item":"https:\/\/rosolutions.com.mx\/blog\/"},{"@type":"ListItem","position":2,"name":"\u00bfC\u00f3mo agregar mapas en React Native? – Tutorial"}]},{"@type":"WebSite","@id":"https:\/\/rosolutions.com.mx\/blog\/#website","url":"https:\/\/rosolutions.com.mx\/blog\/","name":"Desarrollo de software","description":"Blog de RO Solutions","publisher":{"@id":"https:\/\/rosolutions.com.mx\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rosolutions.com.mx\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/rosolutions.com.mx\/blog\/#organization","name":"RO Solutions","url":"https:\/\/rosolutions.com.mx\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2018\/03\/icono-01-2.png","contentUrl":"https:\/\/rosolutions.com.mx\/blog\/wp-content\/uploads\/2018\/03\/icono-01-2.png","width":350,"height":346,"caption":"RO Solutions"},"image":{"@id":"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/rosolutionsmx\/","https:\/\/x.com\/ROSolutionsmx"]},{"@type":"Person","@id":"https:\/\/rosolutions.com.mx\/blog\/#\/schema\/person\/21058f79b1f15a79c52bddb4cf8fe925","name":"Jorge Jos\u00e9 Valenzuela Mart\u00ednez","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/f7afbbe5d551726f01e38f65a019ce2a377640f801f97e6c20802fa54a2a349b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/f7afbbe5d551726f01e38f65a019ce2a377640f801f97e6c20802fa54a2a349b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/f7afbbe5d551726f01e38f65a019ce2a377640f801f97e6c20802fa54a2a349b?s=96&d=mm&r=g","caption":"Jorge Jos\u00e9 Valenzuela Mart\u00ednez"},"sameAs":["http:\/\/rosolutions.com.mx"],"url":"https:\/\/rosolutions.com.mx\/blog\/author\/jorge-valenzuela\/"}]}},"_links":{"self":[{"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/posts\/561","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/comments?post=561"}],"version-history":[{"count":28,"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/posts\/561\/revisions"}],"predecessor-version":[{"id":736,"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/posts\/561\/revisions\/736"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/media\/591"}],"wp:attachment":[{"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/media?parent=561"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/categories?post=561"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rosolutions.com.mx\/blog\/wp-json\/wp\/v2\/tags?post=561"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}