Intégrer le code Google Map en HTML avec un marqueur
J'ai plusieurs endroits avec leur latitude et leur longitude. Je veux les afficher dans google map. C'est ok, ce que je ne peux pas est d'afficher le marqueur à la position lat,longue spécifique.
Par exemple, si j'ai le code suivant, est-il possible de placer une option pour afficher le marché car tous les lat, long coord viennent d'une base de données et font écho à php
<iframe width="425" height="350" frameborder="0" scrolling="no"
marginheight="0" marginwidth="0"
src="http://maps.google.mu/?ie=UTF8&ll=-20.234496,57.603722&spn=0.093419,0.169086&t=m&z=13&
output=embed"></iframe>
<br />
<small><a href="http://maps.google.mu/?ie=UTF8&ll=-20.234496,57.603722
&spn=0.093419,0.169086&t=m&z=13&source=embed"
style="color:#0000FF;text-align:left">View Larger Map
</a>
</small>
5 réponses
L'élément que vous avez posté semble être simplement copié-collé à partir de la fonctionnalité d'intégration de Google Maps.
Si vous souhaitez supprimer des marqueurs pour les emplacements que vous avez, vous devrez écrire du JavaScript pour le faire. Je suis en train d'apprendre comment faire cela.
Consultez ce qui suit: https://developers.google.com/maps/documentation/javascript/overlays
Il a plusieurs exemples et exemples de code qui peuvent être facilement réutilisés et adaptés pour s'adapter à votre courant problème.
Je suggère de cette façon, une ligne iframe. aucun javascript nécessaire du tout. Dans la requête ?q=,
<iframe src="http://maps.google.com/maps?q=12.927923,77.627108&z=15&output=embed"></iframe>
Apprendre la bibliothèque JavaScript de Google est une bonne option. Si vous n'avez pas envie d'entrer dans le codage, vous trouverez peut-être Maps Engine Lite utile.
C'est un outil récemment publié par Google où vous pouvez créer vos cartes personnelles (créer des marqueurs, dessiner des géométries et adapter les couleurs et les styles).
Voici un tutoriel utile que j'ai trouvé: Conseil Rapide: Intégrer De Nouvelles Cartes Google
Pas besoin d'outils javascript ou tiers, utilisez ceci:
<iframe src="https://www.google.com/maps/embed/v1/place?key=<YOUR API KEY>&q=71.0378379,-110.05995059999998"></iframe>
Le lieu paramètre fournit le marqueur
Il y a quelques options pour le format du paramètre' q '
Assurez-vous que L'API Google Maps Embed et L'API Static Maps sont activées dans vos API, sinon google bloquera la requête
Pour plus d'informations, consultez ici
Utilisez ceci, N'oubliez pas d'obtenir une clé api google à partir de
Https://console.developers.google.com/apis/credentials
Et le remplacer
<div id="map" style="width:100%;height:400px;"></div>
<script>
function myMap() {
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
var myCenter = new google.maps.LatLng(38.224905, 48.252143);
var mapCanvas = document.getElementById("map");
var mapOptions = {center: myCenter, zoom: 16};
var map = new google.maps.Map(mapCanvas, mapOptions);
var marker = new google.maps.Marker({position:myCenter});
marker.setMap(map);
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=myMap"></script>