Étape 7: À l’aide de l’API de Google pour créer une carte
Pour beaucoup de raisons, que vous pouvez avoir une carte dans votre application, Google fournit une API pour le faire facilement.
Tout d’abord, nous devons inclure l’API dans le fichier index.html, nous faisons cela de la même manière, nous avons inclus nos propres fichiers js.
Ajoutez ensuite une nouvelle map.html de modèle. Dans ce nouveau fichier html, nous créons une vue nommée navigation et dans cette perspective, nous créons un champ avec carte de classe personnalisée. Il s’agit de la toile sur laquelle on mettra la carte google. Dans notre fichier css, que nous créons une règle #map pour correspondre à la classe, nous avons juste utilisé et définissez la taille à 100 %, de cette façon la carte prendra tout l’espace possible.
La partie la plus difficile de faire la carte est le contrôleur. Nous l’habitude de mettre les contrôleurs dans un fichier séparé, alors créer un fichier nommé controllers.js dans le plan de js. La première ligne dans ce fichier il déclare comme module angulaire js avec contrôleurs de nom dans le contexte de myApp. Ensuite, il y a le contrôleur NavCtrl, qui se chargera de la carte. Nous définissons un intitialize de fonction qui va initialiser la carte et peignez-le sur la toile. Géolocalisation permet d’obtenir votre position actuelle. Le plan est ensuite créé à l’aide de votre position et le facteur de zoom 10. Pour mettre un marqueur où vous êtes maintenant, nous définissons un objet Marker, avec une position, une carte à utiliser et un nom.
À la fin de notre contrôleur de la ligne
attend que puis appels initialiser fonction ionique est prêt à lire le fichier. C’est plus sûr que juste l’appel Initialize. parce qu’alors l’application peut-être ou ne peut-être pas faire les choses. Cette ligne sera exécutée lorsque le contrôleur est créé. Mais nous ne l’utilisez pas encore, laisse ainsi lier à la page map.html.
Pour cela, nous créons un nouvel État dans app.js, dans dont la vue nous charger la page map.html et le contrôleur : NavCtrl.
Maintenant, tout ce qui repose est pour pointer notre Navigation dans la barre latérale vers cet État. Nous faisons cela en ajoutant un attribut ui-astou le lien à côté-menu.html. astou est synonyme de référence de l’Etat, donc au lieu de référencer une url et d’avoir à le changer si vous décidez de changer l’url, vous utilisez juste l’État.
