Comment définir marqueur google map par la latitude et la longitude et fournir bulle d'information

Question

Le code exemple suivant fourni par google maps api

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

ce qui suit montre seulement la carte Google de l'emplacement sans marqueur. Je me demandais comment je pouvais placer un marqueur en donnant des paramètres de latitude/longitude? Et comment est-il possible de stocker mes propres informations extraites d'une base de données sur ce marqueur?

Answer 1

Voici un JSFiddle Demo qui vous montre comment définir un marqueur google map par Lat Lng et aussi quand clic vous donnera une fenêtre d'information (bulle):

Voici notre HTML de base avec 3 liens hypertexte lorsque vous cliquez dessus 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 défini 2 variables globales. un pour la carte et un autre un tableau pour tenir nos marqueurs:

var map; 
var markers = []; 

Ceci est notre initialize 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 créons alors 3 lat endroits lng où nous aimerions 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 marqueurs en fonction de ce qui est passé sur elle. myloc sera soit usa, brasil ou argentine et nous créons ensuite le marqueur basé sur le param passé. Avec la fonction addMarker nous vérifions et nous assurons que nous ne créons pas de marqueur dupliqué sur la carte en appelant la boucle for et si nous avons déjà créé le param passé, nous revenons de la fonction et ne faisons rien, sinon nous créons le marqueur et le pousser sur le tableau des marqueurs globaux. Une fois le marqueur créé, nous attachons ensuite une fenêtre d'information avec son marqueur associé en faisant markers[markers.length-1]['infowin'] markers.length-1 est simplement en train d'obtenir le marqueur nouvellement poussé sur le tableau. Dans la fenêtre d'information, nous définissons le contenu en utilisant html. C'est essentiellement l'information que vous mettez dans la bulle ou dans la fenêtre d'information (il peut s'agir d'informations météo que vous pouvez remplir en utilisant une API météo, etc.). Une fois la fenêtre d'information attachée, nous attachons un écouteur d'événement onclick à l'aide de addListener de l'API Google Map. Lorsque le clic est fait, nous voulons ouvrir la fenêtre d'information qui lui est associée en appelant this['infowin'].open(map, this) où la carte est notre carte globale. marqueur nous associons actuellement l'événement onclick avec.

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, nous attachons essentiellement événement window.onload et appeler la fonction initialize:

window.onload = initialize;