web-dev-qa-db-fra.com

Incorporer le code Google Map en HTML avec un marqueur

J'ai plusieurs endroits avec leur latitude et longitude. Je veux les afficher dans google map. Thats ok, ce que je ne peux pas, c’est d’afficher le marqueur à la position spécifique lat, long.

par exemple. si j'ai le code suivant, est-il possible de placer une option permettant d'afficher le marché également, car toutes les coordonnées lat, longues proviennent d'une base de données et sont répercutées avec php

<iframe width="425" height="350" frameborder="0" scrolling="no" 
        marginheight="0" marginwidth="0" 
        src="http://maps.google.mu/?ie=UTF8&amp;ll=-20.234496,57.603722&amp;spn=0.093419,0.169086&amp;t=m&amp;z=13&amp;
        output=embed"></iframe>
        <br />
        <small><a href="http://maps.google.mu/?ie=UTF8&amp;ll=-20.234496,57.603722
                  &amp;spn=0.093419,0.169086&amp;t=m&amp;z=13&amp;source=embed"
               style="color:#0000FF;text-align:left">View Larger Map
               </a>
        </small>
htmlgoogle-maps
21
Noor

L'élément que vous avez posté semble avoir été 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. J'apprends à faire cela aussi.

Découvrez les éléments suivants: https://developers.google.com/maps/documentation/javascript/overlays

Il contient plusieurs exemples et exemples de code qui peuvent être facilement réutilisés et adaptés à votre problème actuel.

11
zigzag

Je suggère de cette façon, une ligne iframe . Pas de 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>

41
naren

Apprendre la bibliothèque JavaScript de Google est une bonne option. Si vous n'avez pas envie de vous lancer dans la programmation, vous trouverez peut-être utile Maps Engine Lite .

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é: Astuce: intégrer de nouvelles cartes Google Maps

6
linqu

pas besoin de javascript ou d '' outils 'tiers, utilisez ceci:

<iframe src="https://www.google.com/maps/embed/v1/place?key=<YOUR API KEY>&q=71.0378379,-110.05995059999998"></iframe>

le paramètre place fournit le marqueur

il y a quelques options pour le format du paramètre 'q'

assurez-vous que les API Google Maps Embed et Static Maps sont activées dans vos API, sinon Google bloquera la demande.

pour plus d'informations, consultez ici

3
uofc

UTILISEZ ceci, n'oubliez pas de vous procurer une clé de l'API Google

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>
1
masoud Cheragee