Home/ Questions/Q 7028209
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:21:24+00:00

I have used below code for displaying multiple marker in the google map and

  • 0

I have used below code for displaying multiple marker in the google map and it works perfectly. 

var locations = [
        [51.481383, -3.114967, 'UK', 'Cardiff'],
        [52.362393, 4.893379, 'NL', 'Amsterdam'],
        [48.852314, 2.350089, 'FR', 'Paris'],
        [40.18884, -3.716812, 'SP', 'Madrid'],
        [53.800651, -4.064941, 'IT', 'Rome'],
        [42.041134, 1.889648, 'SP', 'Costa Brava'],
        [37.014581, -7.933888, 'PT', 'Algarve'],
        [28.358776, -14.05426, 'PT', 'Fuerteventura'],
        [29.046854, -13.589973, 'SP', 'Lanzarote']
    ];

var map = new google.maps.Map(document.getElementById('map'), {
  zoom: 3,
  center: new google.maps.LatLng(40.92, 1.25),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

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

var marker, i;

for (i = 0; i < locations.length; i++) {  
  marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][0], locations[i][1]),
    map: map
  });

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][3]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

Now my question is that,

In this code the location is added manually.
But i have the functionality to add the search box and and search by location(Address).
That means i have to convert the address location in to lat-long value.

So any one can extend this code?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    use The Google Geocoding API

    see this exmaple

    code

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

  function codeAddress() {
    var address = document.getElementById("address").value;
    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,
            position: results[0].geometry.location
        });
      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
    });
  }

<body onload="initialize()">
 <div id="map_canvas" style="width: 320px; height: 480px;"></div>
  <div>
    <input id="address" type="textbox" value="Sydney, NSW">
    <input type="button" value="Encode" onclick="codeAddress()">
  </div>
</body>
    • 0