Comment définir le marqueur de carte Google par la latitude et la longitude et fournir des informations bulle

Ici est un JSFiddle Démo qui vous montre comment définir une carte google marqueur par Lat Gnl et également lors d'un clic vous donnera une fenêtre d'information (bulle):

Voici notre HTML de base avec 3 liens hypertextes lors d'un clic ajoute un marqueur sur la carte:

<div id="map_canvas"></div>

<a href='javascript:addMarker("usa")'>Click to Add U.S.A</a><br/>
<a href='javascript:addMarker("brasil")'>Click to Add Brasil</a><br/>
<a href='javascript:addMarker("argentina")'>Click to Add Argentina</a><br/>

Nous avons d'abord mis 2 variables globales. un pour la carte et de l'autre un tableau pour contenir nos marqueurs:

var map;
var markers = [];

C'est notre initialiser pour créer une carte google:

function initialize() {
    var latlng = new google.maps.LatLng(40.77627, -73.910965);
    var myOptions = {
        zoom: 1,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

Nous avons ensuite créer 3 lat, lng endroits où nous voulons placer notre marqueurs:

var usa = new google.maps.LatLng(37.09024, -95.712891);
var brasil = new google.maps.LatLng(-14.235004, -51.92528);
var argentina = new google.maps.LatLng(-38.416097, -63.616672);

Ici, nous créons une fonction pour ajouter nos repères basés sur ce qui est passé sur elle. myloc seront soit des états-unis, le brésil ou l'argentine, et on crée ensuite le marqueur basé sur le passé param. Dans le addMarker fonction, nous vérifions et nous assurer de ne pas créer des doublons de marqueur sur la carte en appelant la boucle for et si nous le passé param a déjà été créés, puis nous de retour de la fonction et de ne rien faire, sinon nous à créer le marqueur et le pousser dans le monde des marqueurs de tableau. Après le marqueur est créé, nous fixez ensuite une fenêtre d'information avec ses associés marqueur en faisant markers[markers.length-1]['infowin'] marqueurs.longueur-1 est en fait juste d'obtenir le nouvellement poussé marqueur sur le tableau. Dans la fenêtre d'informations nous avons mis le contenu à l'aide de html. C'est fondamentalement les informations que vous entrez dans la bulle ou la fenêtre info (il peut être le climat, les informations que vous pouvez remplir à l'aide d'une météo et d'API, etc). Après la fenêtre d'information est joint à nous, puis attacher un événement onclick de l'écouteur à l'aide de l'API Google Map est addListener et quand le marqueur est cliqué, nous voulons ouvrir la fenêtre d'informations qui y est associée en appelant this['infowin'].open(map, this) où la carte est notre monde et c'est le marqueur nous sommes actuellement en associant l'événement onclick.

function addMarker(myloc) {
    var current;
    if (myloc == 'usa') current = usa;
    else if (myloc == 'brasil') current = brasil;
    else if (myloc == 'argentina') current = argentina;
    for (var i = 0; i < markers.length; i++)
    if (current.lat() === markers[i].position.lat() && current.lng() === markers[i].position.lng()) return;

    markers.push(new google.maps.Marker({
        map: map,
        position: current,
        title: myloc
    }));

    markers[markers.length - 1]['infowin'] = new google.maps.InfoWindow({
        content: '<div>This is a marker in ' + myloc + '</div>'
    });

    google.maps.event.addListener(markers[markers.length - 1], 'click', function() {
        this['infowin'].open(map, this);
    });
}

Quand tout est fait essentiellement, nous joindre window.onload événement et d'appeler la fonction d'initialisation:

window.onload = initialize;