Bootstrap et iFrame google map
J'ai utilisé un Bootstrap modèle ("Élégant Portefeuille" - http://startbootstrap.com/stylish-portfolio ) pour faire un simple page de portfolio pour un de mes amis.
Devrais-je dire, que j'ai plaisir à faire le codage dans mon temps libre, et je ne suis pas un professionnel en aucune façon, donc je m'excuse pour mon newbieness! 🙂
De toute façon, ne peuvent pas comprendre comment modifier l'emplacement de l'iframe google map qui est intégré dans le modèle html.
En tant que par défaut il est réglé pour localiser les Twitters HQ. Mais ce n'est pas vraiment ce que je veux.
J'ai besoin de le montrer à Philadelphie sur la carte, mais je l'ai tout simplement pas le faire fonctionner!
Pour être plus précis, c'est le point de vue exact de la carte doivent fournir:
https://www.google.com/maps/place/Philadelphia,+PA/@40.002498,-75.1180329,11 z/data=!3m1!4b1!4m2!3m1!1s0x89c6b7d8d4b54beb:0x89f514d88c3e58c1
Quand je regarde le code html de la carte, j'ai ceci:
<!-- Map -->
<div id="contact" class="map">
<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A&output=embed"></iframe>
<br />
<small>
<a href="https://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&aq=0&oq=twitter&sll=28.659344,-81.187888&sspn=0.128789,0.264187&ie=UTF8&hq=Twitter,+Inc.,+Market+Street,+San+Francisco,+CA&t=m&z=15&iwloc=A"></a>
</small>
</iframe>
</div>
<!-- /Map -->
C'est tout.
Vraiment, je pourrais utiliser un peu d'aide ici depuis ce que j'ai d'abord pensé coordonnées, ne sont pas, en fait, que. Mais je n'ai aucune idée de comment changer l'emplacement de la carte! Ou la petite boîte avec le courant Twitter de l'information.
Quelqu'un qui a une expérience avec cela?
- Peut-être la bootstrap balise il peut être approprié.
Vous devez vous connecter pour publier un commentaire.
Changement iframe avec celui-ci,
La solution à votre problème est assez facile...
Suivez ces étapes:
Entrez votre clé API, si vous n'avez pas de clé API suivez les istractions ci-dessous et de créer une API (clé), si vous avez une clé API de sauter les étapes 3.1, 3.1.1, 3.1.2., 3.1.3., 3.1.4.,
3.1 la Création de la clé API
3.1.1. Visite de l'Api Console à https://code.google.com/apis/console et connectez-vous avec votre Compte Google.
3.1.2.Cliquez sur le lien Services à partir du menu de gauche.
3.1.3.Activer les Cartes Google maps Intégrer l'API de service.
3.1.4.Cliquez sur l'API lien d'Accès à partir du menu de gauche. Votre clé API est disponible à partir de l'API d'Accès à la page, dans le Simple Accès aux API de la section. Maps API des applications d'utiliser la Clé pour le navigateur apps.
Votre clé API ressemble à quelque chose comme ceci: AIzaSyCwI3k7JC29_KzlX1S_bC8fARpoclx5bry
Après vous entrez votre clé API cliquez sur "TERMINÉ"
Copiez Et Collez le code que vous obtiendrez de vos modèles index.html et vous avez terminé.
Modifier la hauteur et la largeur à 100% (là où il est écrit
C'est tout!
Voici le code