web-dev-qa-db-fra.com

Google Maps; ajouter une marque de place au marqueur

Comme vous pouvez le voir sur l'image suivante, la variable div (en haut à gauche) indique l'adresse/les directions/le marqueur actuel du marqueur.

enter image description here

Cela a été fait en utilisant le code iframe intégré de Google Maps. Mais comment pouvez-vous faire la même chose avec une carte personnalisée "codée"?

geocoder = new google.maps.Geocoder();

geocoder.geocode({
    "address": nw.google_pointer
}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {

        var myOptions = {
            zoom: parseInt(nw.google_zoom),
            center: results[0].geometry.location,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        var marker = new google.maps.Marker({
            map: map,
            position: results[0].geometry.location,
            title: nw.google_pointer
        });
    } else {
        console.log('Geocode was not successful for the following reason: ' + status);
    }
});
javascriptgoogle-mapsgoogle-maps-api-3
12
numediaweb

jsbin avec ma solution

Contexte:

Il me fallait une meilleure solution au problème de défilement de la molette de la souris ici et ici . Le meilleur moyen d’obtenir le comportement que je voulais était de rester avec l’API, mais j’aime beaucoup la carte présentée dans la version intégrée.

Méthode:

  1. Code de carte copié et css associé à partir de la version intégrée.
  2. En javascript, ajoutez le code HTML de la carte dans la carte rendue lorsqu'il est prêt

Mes personnalisations:

  1. Suppression de l'option "Enregistrer" car cela ne fonctionne pas.
  2. Carte positionnée en haut à droite - regardez le code HTML ajouté en javascript, codé en dur avec position absolue, vous pouvez le modifier ou l'associer à une classe si vous préférez.

J'espère que cela fonctionne pour toi!

12
jcsmesquita

J'ai ajouté une deuxième carte dans la réponse @jcsmesquita mais il y a les mêmes cartes de lieu sur deux cartes: http://jsbin.com/vixehodaka/edit?html,css,js,output

j'ai donc changé un peu le code javascript: jsbin.com/dezorezohe/edit?html,css,js,output

0
user4757345