Menu

Google map api marker personnalisé [Résolu]

Messages postés
2
Date d'inscription
lundi 14 janvier 2019
Dernière intervention
14 janvier 2019
-
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: [http://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);
Afficher la suite 

Votre réponse

3 réponses

Meilleure réponse
Messages postés
24071
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2019
2142
1
Merci
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 ?


Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 56015 internautes nous ont dit merci ce mois-ci

dadaboss92
Messages postés
2
Date d'inscription
lundi 14 janvier 2019
Dernière intervention
14 janvier 2019
-
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.
Commenter la réponse de jordane45
Messages postés
24071
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2019
2142
1
Merci
Que donne ceci :
var google;
var map;
var geocoder;
function init() {
    // Basic options for a simple Google Map
    // For more options see: [http://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]);      
    }
    
}

//http://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

Dire « Merci » 1

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 56015 internautes nous ont dit merci ce mois-ci

Commenter la réponse de jordane45
0
Merci
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="http://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
jordane45
Messages postés
24071
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
18 janvier 2019
2142 -
Il faut, en effet, les activer...
Sur ton compte google

http://console.developers.google.com/projectselector/apis/dashboard?supportedpurview=project

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

Recherche Geocoding et click on Google Maps Geocoding API -> Enable API.
Et pareil sur Geolocating
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.
Commenter la réponse de dadaboss92
Macht oder Liebe - Chapter 69 | Dog Days (2018) streaming HD | Neu eingestellt