Displaying markers for local attractions on a Google map

Question

I have created a page that displays markers for local attractions on a Google map. There are a few functions that do similar tasks and I have tried to reduce these by incorporating them into one function, but to no avail. Any suggestions on how to go about doing this?

<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?     sensor=true&libraries=places"></script>
  <script type="text/javascript">

var map, map1, map2;
var infowindow;

function initialize() {
    var feed1 = new google.maps.LatLng(51.5069999695, -0.142489999533);
    var feed2 = new google.maps.LatLng(40.79445,-74.01558);
    var feed3 = new google.maps.LatLng(48.858001709, 2.29460000992);

    map = new google.maps.Map(document.getElementById('map'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center:feed1,
        zoom: 11
    });

    map1 = new google.maps.Map(document.getElementById('map1'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center:feed2,
        zoom: 11
    });

    map2 = new google.maps.Map(document.getElementById('map2'), {
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        center:feed3,
        zoom: 11
    });

    var request = {
        location: feed1,
        radius: 5000

    };

    var request1 = {
        location: feed2,
        radius: 5000

    };

    var request2 = {
        location: feed3,
        radius: 5000

    };
    infowindow = new google.maps.InfoWindow();
    var service = new google.maps.places.PlacesService(map);
    service.search(request, callback);

    infowindow1 = new google.maps.InfoWindow();
    var service1 = new google.maps.places.PlacesService(map1);
    service1.search(request1, callback);

    infowindow2 = new google.maps.InfoWindow();
    var service2 = new google.maps.places.PlacesService(map2);
    service2.search(request2, callback);
}


function callback(results, status) {
    if (status == google.maps.places.PlacesServiceStatus.OK) {
        for (var i = 0; i < results.length; i++) {
            createMarker(results[i]);
            createMarker1(results[i]);
            createMarker2(results[i]);
        }
    }
}

function createMarker(place) {
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        map: map,

        position: place.geometry.location
    });


    google.maps.event.addListener(marker, 'click', function() {

        infowindow.setContent(place.name);
        infowindow.open(map, this);

    });        
}

function createMarker1(place1) {
    var placeLoc1 = place1.geometry.location;
    var marker1 = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        map: map1,

        position: place1.geometry.location
    });

    google.maps.event.addListener(marker1, 'click', function() {

        infowindow1.setContent(place1.name);
        infowindow1.open(map1, this);

    });     
}

function createMarker2(place2) {
    var placeLoc2 = place2.geometry.location;
    var marker2 = new google.maps.Marker({
        animation: google.maps.Animation.DROP,
        map: map2,

        position: place2.geometry.location
    });

    google.maps.event.addListener(marker2, 'click', function() {

        infowindow2.setContent(place2.name);
        infowindow2.open(map2, this);

    });

}

google.maps.event.addDomListener(window, 'load', initialize);

<div id="map" style="position:absolute; width: 290px; height: 300px;"></div>

<div id="map1" style="position:absolute; left:300px; width: 290px; height: 300px;"></div>

<div id="map2" style="position:absolute; left:600px; width: 290px; height: 300px;"></div>

Answer 1

First off, I find it helpful to use arrays instead of multiple variables. So, how about this:

var map = [], infoWindow = [];

Then, lets rename id map to map0. This will allow us to be clever with how we reference it :)

Now we refactor initialize to use the array and reduce repetition:

function initialize(){
   initMap(0, 51.5069999695, -0.142489999533);
   initMap(1, 40.79445,-74.01558);
   initMap(2 , 48.858001709, 2.29460000992);
}

function initMap(ndx, lat, lng){
   var feed = new google.maps.LatLng(lat, lng);

   map[ndx] = new google.maps.Map(document.getElementById('map'+ndx), {
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: feed,
      zoom: 11
   });

   var request = {
      location: feed,
      radius: 5000
   };

   infoWindow[ndx] = new google.maps.InfoWindow();
   var service = new google.maps.places.PlacesService(map);
   service.search(request, callback);
}

Finally, lets refactor createMarker to use the arrays as well.

function callback(results, status) {
   if (status == google.maps.places.PlacesServiceStatus.OK) {
      for (var i = 0; i < results.length; i++) {
         createMarker(0, results[i]);
         createMarker(1, results[i]);
         createMarker(2, results[i]);
      }
   }
}

function createMarker(ndx, place) {
   var marker = new google.maps.Marker({
      animation: google.maps.Animation.DROP,
      map: map[ndx],
      position: place.geometry.location
   });

   google.maps.event.addListener(marker, 'click', function() {
      infowindow[ndx].setContent(place.name);
      infowindow[ndx].open(map[ndx], this);
   });        
}

google.maps.event.addDomListener(window, 'load', initialize);

Finally, don't forget to rename map to map0

<div id="map0" style="position:absolute; width: 290px; height: 300px;"></div>
<div id="map1" style="position:absolute; left:300px; width: 290px; height: 300px;"></div>
<div id="map2" style="position:absolute; left:600px; width: 290px; height: 300px;"></div>