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>