2
\$\begingroup\$

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>
\$\endgroup\$
1
\$\begingroup\$

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>
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.