Google Maps - Insert markers by city name

Question

I found this code for Google map, and that suits me.

Is it possible that instead of the coordinates include the name of the city?

I have over 400 markers that I want to display on the map. In some cities have more than one. Therefore I like this code because it prints how many markers in some city.

Or if there is some other code that could help me?

<!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>

please dont post such huge arrays, much less could clarify your point :) — davidkonrad, Sep 21 '13 at 12:53
I found such a code. I do not know what I could out of it. :D — Balkan Lifestyle, Sep 21 '13 at 13:18
Deleted the answer, since I apparently totally misunderstood. I thought you wanted to get rid of duplicated markers, therefore wished to add a marker by "city name only". I guess you ask about something complete different : **How to use geocoding** (??), as you have in your code / example but never uses. Try to rephrase your question and show only the code in concern. — davidkonrad, Sep 21 '13 at 13:39

score 3 · Accepted Answer · edited Feb 26 '18 at 07:01

3

If you are wanting the code to work with source data from cities, rather than co-ords (sorry the question isn't very clear, maybe rephrase the question). This is possible with a reverse geocode lookup. There's a jsfiddle here http://jsfiddle.net/sbnXE/ The key changed code that can be added in below...

Note: multiple geocoding per page display is likely a bad idea and could cause problems as in the code below. I think the best method would probabably be to cache up previous geocoding server side, and then use that data to display placemarks.

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

 })
} ;

edited Feb 26 '18 at 07:01

S.M_Emamian

17,005
37
135
254

answered Sep 21 '13 at 15:56

Ian

13,724
4
52
75

1

Why not describe cities that are listed only once. Displays only which are mentioned 2 times or more. – Balkan Lifestyle Sep 21 '13 at 17:20
I think thats because its referencing an image that isn't local to the server, so is not available on a test. Here is an updated jsfiddle with London added and the 'image' placemark pointing to a full URL at Google..Here is the bit I changed... var image = new google.maps.MarkerImage ("http://labs.google.com/ridefinder/images/mm_20_blue.png",new google.maps.Size(40,35),new google.maps.Point(0,0),new google.maps.Point(20,35)); Updated jsfiddle at http://jsfiddle.net/sbnXE/1/ – Ian Sep 21 '13 at 17:59
I put all the cities, but displays incorrectly. Sorry to disturb you. Here I put the cod with all cities. http://jsfiddle.net/sbnXE/21/ – Balkan Lifestyle Sep 21 '13 at 18:28
I suspect for more cities, you will probably want to run the geocoding once only ever for each location, and store somewhere server side those lookups as a cache. Its not really efficient to keep doing those lookups, every page refresh. So the code may end up looking actually like the original source you pasted, but you could have created those lat/lngs from the previous geocoding as above. – Ian Sep 21 '13 at 19:56
This could also be useful to deal with this issue http://stackoverflow.com/questions/2419219/how-do-i-geocode-20-addresses-without-receiving-an-over-query-limit-response – Ian Sep 21 '13 at 20:41

Google Maps - Insert markers by city name

1 Answers1