1. Accueil
  2. Question et réponse
  3. Google Maps - Insérer des marqueurs par nom de ville

Google Maps - Insérer des marqueurs par nom de ville

2013-09-21 2 views
0

J'ai trouvé ce code pour Google map, et cela me convient.Google Maps - Insérer des marqueurs par nom de ville

Est-il possible que les coordonnées incluent le nom de la ville?

J'ai plus de 400 marqueurs que je veux afficher sur la carte. Dans certaines villes ont plus d'un. Par conséquent j'aime ce code parce qu'il imprime combien de marqueurs dans une ville.

Ou s'il y a un autre code qui pourrait m'aider?

<!DOCTYPE html> 
        <html> 
        <head> 
        <meta charset="utf-8"/> 
        <title></title> 
        <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
        <script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script> 


        <script type="text/javascript"> 

        var image = new google.maps.MarkerImage("marker-images/image.png",new google.maps.Size(40,35),new google.maps.Point(0,0),new google.maps.Point(20,35)); 

         var shadow = new google.maps.MarkerImage(
         'marker-images/shadow.png', 
         new google.maps.Size(40,35), 
         new google.maps.Point(0,0), 
         new google.maps.Point(20,35) 
        ); 

         var shape = { 
         coord: [27,0,30,1,32,2,34,3,35,4,36,5,38,6,39,7,39,8,39,9,39,10,38,11,37,12,33,13,34,14,34,15,33,16,32,17,31,18,27,19,28,20,28,21,27,22,26,23,22,25,23,26,24,27,24,28,24,29,24,30,24,31,24,32,23,33,22,34,17,34,16,33,15,32,15,31,14,30,14,29,15,28,15,27,16,26,17,25,13,23,12,22,11,21,11,20,12,19,8,18,7,17,6,16,5,15,5,14,6,13,2,12,1,11,0,10,0,9,0,8,0,7,1,6,3,5,4,4,5,3,7,2,9,1,12,0,27,0], 
     type: 'poly' 
     }; 



      // this variable will collect the html which will eventually be placed in the side_bar 
      var side_bar_html = ""; 

      // arrays to hold copies of the markers and html used by the side_bar 
      // because the function closure trick doesnt work there 
      var gmarkers = []; 

     // global "map" variable 
      var map = null; 
      var circle = null; 

      //marker clusterer 
      var mc; 

          var mcOptions = {gridSize: 20, maxZoom: 28}; 

          //global infowindow 
          var infowindow = new google.maps.InfoWindow(); 

          //geocoder 
          var geocoder = new google.maps.Geocoder(); 

          var address = new Array(
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "44.820325,20.463989", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "45.263772,19.851211", 
        "42.092745,19.090607", 
        "42.092745,19.090607", 
        "42.092745,19.090607", 
        "42.092745,19.090607", 
        "42.092745,19.090607", 
        "42.092745,19.090607", 
        "42.092745,19.090607", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "44.775011,17.195556", 
        "43.85644,18.412372", 
        "43.85644,18.412372", 
        "43.85644,18.412372", 
        "43.85644,18.412372", 
        "43.85644,18.412372", 
        "44.81107,18.062682", 
        "44.81107,18.062682", 
        "44.81107,18.062682", 
        "44.81107,18.062682", 
        "44.81107,18.062682", 
        "44.81107,18.062682", 
        "44.81107,18.062682", 
        "44.81107,18.062682", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.755998,19.212314", 
        "44.725028,17.323452", 
        "44.725028,17.323452", 
        "44.725028,17.323452", 
        "44.81789,15.879166", 
        "44.81789,15.879166", 
        "44.81789,15.879166", 
        "44.81789,15.879166", 
        "44.416801,17.082954", 
        "44.416801,17.082954", 
        "43.940583,18.078254", 
        "43.821276,17.608889", 
        "44.533778,18.531783", 
        "44.533778,18.531783", 
        "44.533778,18.531783", 
        "44.533778,18.531783", 
        "42.430616,18.700176", 
        "42.430616,18.700176", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "44.538795,18.673311", 
        "47.803931,16.232589", 
        "45.330185,14.442848", 
        "43.813906,18.569077", 
        "43.813906,18.569077", 
        "44.200913,17.915928", 
        "43.344281,17.812601", 
        "43.344281,17.812601", 
        "43.344281,17.812601", 
        "43.344281,17.812601", 
        "45.06079,18.468869", 
        "46.308521,16.338333", 
        "44.957206,18.302093", 
        "44.957206,18.302093", 
        "42.711453,18.343807", 
        "42.42493,18.771125", 
        "42.42493,18.771125", 
        "42.42493,18.771125", 
        "41.998284,21.428093", 
        "41.998284,21.428093", 
        "47.071057,15.437797", 
        "45.183791,16.805464", 
        "45.183791,16.805464", 
        "44.968806,15.94338", 
        "44.968806,15.94338", 

        "34.106,-83.589"); 
          var content = new Array("Unit No# 0206", 
        "Unit No# #2003", 
        "Unit No# 0176", 
        "Unit No# #2001", 
        "Unit No# 0124", 
        "Unit No# 0157", 
        "Unit No# #0162", 
        "Unit No# 0104", 
        "Unit No# 0118", 
        "Unit No# #2007", 
        "Unit No# 0112", 
        "Unit No# 0139", 
        "Unit No# 0205", 
        "Unit No# 0127", 
        "Unit No# 0187", 
        "Unit No# 0105", 
        "Unit No# 0214", 
        "Unit No# 0186", 
        "Unit No# 0173", 
        "Unit No# 0134", 
        "Unit No# 0128", 
        "Unit No# 0125", 
        "Unit No# 0158", 
        "Unit No# 0193", 
        "Unit No# 0201"); 

     //min and max limits for multiplier, for random numbers 
     //keep the range pretty small, so markers are kept close by 
     var min = .999999; 
     var max = 1.000001; 

function createMarker(latlng,text) { 

    var marker = new google.maps.Marker({ 
draggable: false, 
raiseOnDrag: false, 
icon: image, 
shadow: shadow, 
shape: shape, 
position: latlng, 
map: map 
    }); 

    ///get array of markers currently in cluster 
    var allMarkers = mc.getMarkers(); 

    //check to see if any of the existing markers match the latlng of the new marker 
    if (allMarkers.length != 0) { 
    for (i=0; i < allMarkers.length; i++) { 
     var existingMarker = allMarkers[i]; 
     var pos = existingMarker.getPosition(); 

     if (latlng.equals(pos)) { 
     text = text + " & " + content[i]; 
     }     
    } 
    } 

    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.close(); 
    infowindow.setContent(text); 
    infowindow.open(map,marker); 
    }); 
    mc.addMarker(marker); 
    return marker; 
} 
function initialize(){ 
var options = { 
zoom: 6, 
center: new google.maps.LatLng(44.276671,18.71727), 
mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
map = new google.maps.Map(document.getElementById('map'), options); 

//marker cluster 

var gmarkers = []; 
mc = new MarkerClusterer(map, [], mcOptions); 
for (i=0; i<address.length; i++) { 
    var ptStr = address[i]; 
    var coords = ptStr.split(","); 
    var latlng = new google.maps.LatLng(parseFloat(coords[0]),parseFloat(coords[1])); 
    gmarkers.push(createMarker(latlng,content[i])); 
} 

} 




     function codeAddress() { 
     var address = document.getElementById('address').value; 
     var radius = parseInt(document.getElementById('radius').value, 10) * 1609.34; 
     geocoder.geocode({ 'address': address}, function(results, status) { 
      if (status == google.maps.GeocoderStatus.OK) { 
      map.setCenter(results[0].geometry.location); 
      var marker = new google.maps.Marker({ 
     //  map: map, <-- uncomment to show red marker 
       position: results[0].geometry.location 
      }); 
      if (circle) circle.setMap(null); 
      circle = new google.maps.Circle({center:marker.getPosition(), 
              radius: radius, 
              fillOpacity: 0.35, 
              fillColor: "#FF0000", 
              map: map}); 
      var bounds = new google.maps.LatLngBounds(); 
     var foundMarkers = 0; 
      for (var i=0; i<gmarkers.length;i++) { 
       if (google.maps.geometry.spherical.computeDistanceBetween(gmarkers[i].getPosition(),marker.getPosition()) < radius) { 
       bounds.extend(gmarkers[i].getPosition()) 
       gmarkers[i].setMap(map); 
     foundMarkers++; 
       } else { 
       gmarkers[i].setMap(null); 
       } 
      } 
      if (foundMarkers > 0) { 
       map.fitBounds(bounds); 
     } else { 
       map.fitBounds(circle.getBounds()); 
      } 


      } else { 
      alert(status); 
      } 
     }); 
     } 

var infowindow = new google.maps.InfoWindow(
    { 
    size: new google.maps.Size(150,50) 
    }); 


function handleKeyPress(e){ 
var key=e.keyCode || e.which; 
    if (key==13){ 
    codeAddress(); 
    } 
} 




function handleResetKeyPress(e){ 

if (map.getZoom() != 6) map.setZoom(6); 
    map.setCenter(new google.maps.LatLng(44.276671,18.71727)); 
    document.getElementById("address").value = 'Unesite ime grada ili drzave'; 
    document.getElementById("radius").value = '50'; 
} 



</script> 
<style> 
html, body, #map { 
height: 100%; 
width: 100%; 
margin: 0; 
padding: 0; 
} 
.auto-style1 { 
    text-align: center; 
} 
    #footer { 
    position : absolute; 
    bottom : 0; 
    height : 40px; 
    margin-top : 40px; 
/* border: 1px solid blue; */ 
    } 
</style> 
</head> 
<body onload='initialize()'> 
<div id="map"></div> 
<div id="footer" class="auto-style1" style="left: 0px; bottom: 0; width: 100%"> 
     <input type="text" id="address" value="Unesite ime grada ili drzave" onclick="if(this.value=='Unesite ime grada ili drzave'){this.value=''}" onblur="if(this.value==''){this.value='Unesite ime grada ili drzave'}" onkeypress="handleKeyPress(event);" style="width: 183px"> 
     <input type="button" value="Search" onclick="codeAddress();"> 
     <input type="button" value="Reset" onclick="handleResetKeyPress();"> 
     <input type="text" id="radius" value="50" style="width: 42px" onclick="if(this.value=='50'){this.value=''}" onblur="if(this.value==''){this.value='50'}" onkeypress="handleKeyPress(event);"> miles 
</div> 
</body>

Source

2013-09-21 Balkan Lifestyle

+0

s'il vous plaît DonT tableaux après ces énormes, beaucoup moins pourrait clarifier votre point :) – davidkonrad

+0

J'ai trouvé un tel code. Je ne sais pas ce que je pourrais en sortir. : D –

+0

Supprimé la réponse, car j'ai apparemment totalement mal compris. Je pensais que vous vouliez vous débarrasser des marqueurs en double, donc je voulais ajouter un marqueur par "nom de la ville seulement". Je suppose que vous demandez quelque chose de complet différent: ** Comment utiliser le géocodage ** (??), comme vous l'avez dans votre code/exemple mais ne l'utilise jamais. Essayez de reformuler votre question et montrez seulement le code en question. – davidkonrad

Répondre

1

Si vous manquez le code pour travailler avec des données sources des villes, plutôt que co-ords (désolé la question n'est pas très clair, peut-être reformuler la question). Ceci est possible avec une recherche de géocodage inverse. Il y a un jsFiddle ici http://jsfiddle.net/sbnXE/ La clé a changé le code qui peut être ajouté en dessous ...

Note: multiple géocodage par affichage de la page est probablement une mauvaise idée et pourrait causer des problèmes comme dans le code ci-dessous. Je pense que la meilleure méthode serait probablement de mettre en cache le côté du serveur de géocodage précédent, puis d'utiliser ces données pour afficher les repères.

var cities = new Array(
    'Dorćol, Belgrade, Serbia', 
    'Dorćol, Belgrade, Serbia', 
    'Dorćol, Belgrade, Serbia', 
    'Rome, Italy', 
    'Rome, Italy'); 

var gmarkers = []; 
mc = new MarkerClusterer(map, [], mcOptions); 

for (i=0; i<cities.length; i++) { 
var ptStr = cities[i]; 
    var newAddress; 

//Key Part Here!!! These should be cached somewhere rather than querying every page refresh like here though. 
geocoder.geocode({ 'address': cities[i] }, function(results, status) { 
if (status == google.maps.GeocoderStatus.OK) { 
    newAddress = results[0].geometry.location; 
    var latlng = new google.maps.LatLng(parseFloat(newAddress.lat()),parseFloat(newAddress.lng())); 
    gmarkers.push(createMarker(latlng,content[i])); 
} 

}) 
} ;

Source

2013-09-21 15:56:08 Ian

+0

Pourquoi ne pas décrire les villes qui ne sont répertoriées qu'une seule fois. Affiche seulement ceux qui sont mentionnés 2 fois ou plus. –

+0

Je pense que c'est parce que son référencement d'une image qui n'est pas locale au serveur, n'est donc pas disponible sur un test. Voici un jsfiddle avec London ajouté et le repère 'image' pointant vers une URL complète sur Google..Voici le bit que j'ai changé ... var image = new google.maps.MarkerImage ("http://labs.google .com/ridefinder/images/mm_20_blue.png ", nouveau google.maps.Size (40,35), nouveau google.maps.Point (0,0), nouveau google.maps.Point (20,35)); Jsfiddle mis à jour à http://jsfiddle.net/sbnXE/1/ – Ian

+0

Je mets toutes les villes, mais affiche incorrectement. Désolé de te déranger. Ici, j'ai mis la morue avec toutes les villes. http://jsfiddle.net/sbnXE/21/ –

Questions connexes

 Questions connexes