Google map api marker personnalisé Résolu/Fermé

Question

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);

jordane45 · Answer

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 ?

jordane45 · Answer

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

dadaboss92 · Answer

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 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