Sujet Précédent Sujet Suivant

Google map api marker personnalisé

Résolu/Fermé
dadaboss92 Messages postés 2 Date d'inscription lundi 14 janvier 2019 Statut Membre Dernière intervention 14 janvier 2019 - Modifié le 14 janv. 2019 à 14:56
 dadaboss92 - 14 janv. 2019 à 16:04
Bonjour,

j'ai téléchargé un template de site web en html et malgré de nombreux essais je ne sais pas comment faire apparaître le marker.

La map fonctionne car c'est la bonne api key qui est dans le html

Mon niveau en codage : remplacer le texte

Merci pour votre aide. 



var google;

function init() {
    // Basic options for a simple Google Map
    // For more options see: [https://developers.google.com/maps/documentation/javascript/reference#MapOptions]
    // var myLatlng = new google.maps.LatLng(40.71751, -73.990922);
    var myLatlng = new google.maps.LatLng(40.71751, -73.990922);
    // 39.399872
    // -8.224454
    
    var mapOptions = {
        // How zoomed in you want the map to start at (always required)
        zoom: 16,

        // The latitude and longitude to center the map (always required)
        center: myLatlng,

        // How you would like to style the map. 
        scrollwheel: false,
        styles: [
            {
                "featureType": "administrative.country",
                "elementType": "geometry",
                "stylers": [
                    {
                        "visibility": "simplified"
                    },
                    {
                        "hue": "#ff0000"
                    }
                ]
            }
        ]
    };

    

    // Get the HTML DOM element that will contain your map 
    // We are using a div with id="map" seen below in the <body>
    var mapElement = document.getElementById('map');

    // Create the Google Map using out element and options defined above
    var map = new google.maps.Map(mapElement, mapOptions);
    
    var addresses = ['New York'];

    for (var x = 0; x < addresses.length; x++) {
        $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', null, function (data) {
            var p = data.results[0].geometry.location
            var latlng = new google.maps.LatLng(p.lat, p.lng);
            new google.maps.Marker({
                position: latlng,
                map: map,
                icon: 'loc.png'
            });

        });
    }
    
}
google.maps.event.addDomListener(window, 'load', init);
A voir également:

3 réponses

Réponse 1 / 3
jordane45 Messages postés 38154 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 651
14 janv. 2019 à 14:58
Bonjour,

La carte s'affiche mais pas les markers ou bien rien ne s'affiche ?

As tu vérifé dans la CONSOLE de ton navigateur si il n'y avait pas des erreurs ?

Tu parles également de la bonne api key... tu veux dire que tu as créé un compte sur google et que tu as utilisé TON api key ?
As tu défini un moyen de paiement également et spécifié les quotas ?


1
dadaboss92 Messages postés 2 Date d'inscription lundi 14 janvier 2019 Statut Membre Dernière intervention 14 janvier 2019
14 janv. 2019 à 15:07
La carte s'affiche mais pas le marker.
Verifier, comment ?
Oui j'ai crée un compte google api, défini le moyen de paiement et les quotas.
En espérant que ça aide.
0
Réponse 2 / 3
jordane45 Messages postés 38154 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 651
14 janv. 2019 à 15:19
Que donne ceci : 
var google;
var map;
var geocoder;
function init() {
    // Basic options for a simple Google Map
    // For more options see: [https://developers.google.com/maps/documentation/javascript/reference#MapOptions]
    // var myLatlng = new google.maps.LatLng(40.71751, -73.990922);
    var myLatlng = new google.maps.LatLng(40.71751, -73.990922);
    // 39.399872
    // -8.224454
    
    var mapOptions = {
        // How zoomed in you want the map to start at (always required)
        zoom: 16,

        // The latitude and longitude to center the map (always required)
        center: myLatlng,

        // How you would like to style the map. 
        scrollwheel: false,
        styles: [
            {
                "featureType": "administrative.country",
                "elementType": "geometry",
                "stylers": [
                    {
                        "visibility": "simplified"
                    },
                    {
                        "hue": "#ff0000"
                    }
                ]
            }
        ]
    };

    

    // Get the HTML DOM element that will contain your map 
    // We are using a div with id="map" seen below in the <body>
    var mapElement = document.getElementById('map');

    // Create the Google Map using out element and options defined above
     map = new google.maps.Map(mapElement, mapOptions);
     geocoder = new google.maps.Geocoder();
    
    var addresses = ['New York'];
    console.log('addresses',addresses);
    for (var x = 0; x < addresses.length; x++) {
       geocodeAddress(geocoder, map ,addresses[x]);      
    }
    
}

//https://developers.google.com/maps/documentation/javascript/examples/geocoding-simple
function geocodeAddress(geocoder, resultsMap,address) {
   geocoder.geocode({'address': address}, function(results, status) {
   if (status === 'OK') {
     resultsMap.setCenter(results[0].geometry.location);
     var marker = new google.maps.Marker({
       map: resultsMap,
       position: results[0].geometry.location,
       icon: 'loc.png'
     });
   } else {
     alert(address, ' Error ! Geocode was not successful for the following reason: ' + status);
   }
  });
}

google.maps.event.addDomListener(window, 'load', init);


NB: Pense à ouvrir la CONSOLE de ton navigateur ( CTRL+F12, onglet : "console") pour voir les éventuelles erreurs ou le résultat des "console.log" qui sont dans le code
1
Réponse 3 / 3
dadaboss92
14 janv. 2019 à 15:51
Voici me message dans la console :
js?key=AIzaSyCUq5XQ2TTRrXpNNss---------------------------- Geocoding Service: This API project is not authorized to use this API. For more information on authentication and Google Maps JavaScript API services

Et voici mon html 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCUq5XQ2TTRrXpNNss-------------------------------"></script>


J'ai sans pas du activer une option.

Avec ce nouveau script j'ai un pop up en haut de l'écran qui s'affiche et indique "new york"

Merci
0
jordane45 Messages postés 38154 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 4 mai 2024 4 651
14 janv. 2019 à 15:56
Il faut, en effet, les activer...
Sur ton compte google

https://accounts.google.com/ServiceLogin?service=cloudconsole&passive=1209600&osid=1&continue=https://console.developers.google.com/projectselector/apis/dashboard?supportedpurview%3Dproject&followup=https://console.developers.google.com/projectselector/apis/dashboard?supportedpurview%3Dproject

vas sur la console "Developer Console" -> APIs & auth -> APIs

Recherche Geocoding et click on Google Maps Geocoding API -> Enable API.
Et pareil sur Geolocating
0
dadaboss92
Modifié le 14 janv. 2019 à 16:05
Bingo !

J'aurais été totalement incapable de le faire. Merci beaucoup.

15 options à activer ça ne m'avait pas l'air de couler de source.
0

Discussions similaires

Prélèvement Google Ireland Limited
jaffa1961 -
gill34051 -

32 réponses