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>
Displaying markers for local attractions on a Google map
javascript;google maps
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>