Google Maps - Marker Einfügen, indem Sie namens der Stadt

Fand ich diesen code für die Google-Karte, und das passt zu mir.

Ist es möglich, dass statt der Koordinaten den Namen der Stadt?

Habe ich über 400 Marken, die ich zur Anzeige auf der Karte. In einigen Städten haben mehr als eine. Deshalb mag ich diesen code, denn es druckt, wie viele Marker in irgendeiner Stadt.

Oder wenn es irgendeinen anderen code, der mir helfen könnte?

<!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>
  • bitte post nicht so große arrays, viel weniger könnte klären, dein Punkt 🙂
  • Ich fand einen solchen code. Ich weiß nicht, was ich konnte aus ihm heraus. 😀
  • Gelöscht die Antwort, da ich anscheinend Total falsch verstanden. Ich dachte, Sie wollten, um loszuwerden, von duplizierten Marker, wollte daher, um einen marker hinzuzufügen, indem Sie "name der Stadt nur". Ich denke mal Sie etwas Fragen komplett anders aus : Wie zu verwenden geocoding (??), Sie haben in Ihrem code / Beispiel, aber nie verwendet. Versuchen Sie, formulieren Sie Ihre Frage und zeigen Sie nur den code in Sorge.
InformationsquelleAutor Balkan Lifestyle | 2013-09-21
  1. 1

    Wenn Sie wollen, den code für die Arbeit mit source-Daten von Städten, eher als co-ords (sorry die Frage ist nicht ganz klar, vielleicht formulieren Sie die Frage). Dies ist möglich mit einem reverse geocode lookup.
    Es ist ein jsfiddle hier http://jsfiddle.net/sbnXE/
    Der Schlüssel verändert-code, der Hinzugefügt werden kann unter...

    Hinweis: mehrere geocoding pro Seite anzeigen, ist es wahrscheinlich eine schlechte Idee und könnte zu Problemen führen, wie im code unten. Ich denke, die beste Methode wäre ein probabably werden, um cache auf Vorherige geocoding-server-Seite, und verwenden Sie dann die Daten anzeigen Ortsmarken. 

    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]));
}

 })
} ;
    • Warum nicht beschreiben Städte, die sind nur einmal aufgeführt. Zeigt nur die erwähnten 2 mal oder mehr.
    • Ich denke, das ist weil sein Verweis auf ein Bild, das nicht lokal auf dem server, ist also nicht auf einen test. Hier ist eine aktualisierte jsfiddle mit London Hinzugefügt und die 'Bild' Ortsmarkierung zeigt auf eine vollständige URL bei Google..Hier ist das bit ich geändert... var Bild = new google.maps.MarkerImage ("labs.google.com/ridefinder/images/mm_20_blue.png"neue google.maps.Größe(40,35),new google.maps.Punkt(0,0),new google.maps.Punkt(20,35)); Aktualisiert jsfiddle in jsfiddle.net/sbnXE/1
    • Ich habe alle Städte, aber wird falsch dargestellt. Tut mir Leid, Sie zu stören. Hier habe ich die cod mit allen Städten. jsfiddle.net/sbnXE/21
    • Ich vermute, dass weitere Städte, möchten Sie wahrscheinlich, um führen Sie die Geokodierung einmal immer nur für jeden Speicherort, und speichern Sie irgendwo server-Seite lookups, wie ein cache. Es ist nicht wirklich effizient zu halten tun diese lookups jeder Aktualisierung der Seite. So kann der code am Ende der Suche tatsächlich wie die ursprüngliche Quelle, der Sie eingefügt, aber könnten Sie angelegt haben, diese lat/lngs von der vorherigen geocoding wie oben.
    • Dies könnte auch nützlich sein, um mit diesem Problem umzugehen stackoverflow.com/questions/2419219/...
    InformationsquelleAutor Ian
Schreibe einen Kommentar