2
\$\begingroup\$

What follows is the JavaScript written for a Google Maps API implementation (for an image gallery that shows image, location, description, next and prev buttons, etc.).

I have a JSON mapLocationData where I get information like the title, location, image, and description. I also have a mapFunctions variable which is a revealing module pattern returning the common functions.

I want to know if the pattern I've used is suitable for this task I'm planning to accomplish (an image gallery). Is there a better alternative? If not, can this be made any simpler?

var markersArray = [];
var mapLocationData = {
  "type": "FeatureCollection",
  "features": [
      {
      "type": "Feature",
      "properties": {
        "title": "The City of Lights",
        "location": "Kakinada",
        "description": "Since meeting you, I am bolder, less sensitive, and more like myself. You absolutely enchant me. I’ve never encountered such a dynamic and robust city, a living, breathing creature that thrives on success and hungrily devours insecurity. I think I’ve finally met my match.",
        "image": "image-1.jpg"
      },
      "geometry": {
        "type": "Point",
        "coordinates": [
          82.23, 16.94
        ]
       }
      },
      {
        "type": "Feature",
        "properties": {
          "title": "The City of Destiny",
          "location": "Visakhapatnam",
          "description": "Vizag, the city for all. Fondly referred to as the City of Destiny, Visakapatnam is a land of beauty, sea breeze, fast paced city coupled magically with a serene lifestyle. Most people who would have lived in Vizag even for a brief time would never forget their encounter. The memories with Vizag are forever etched in the minds of those who would have lived here whole life or ran into the sea side because of other reasons.",
          "image": "image-2.jpg"

        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            83.2185, 17.6868
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "title": "View from Hooghly",
          "location": "Howrah",
          "description": "Howrah Bridge is a cantilever bridge with a suspended span over the Hooghly River in West Bengal, India. Commissioned in 1943, the bridge was originally named the New Howrah Bridge, because it replaced a pontoon bridge at the same location linking the two cities of Howrah and Kolkata (Calcutta). On 14 June 1965 it was renamed Rabindra Setu after the great Bengali poet Rabindranath Tagore, who was the first Indian and Asian Nobel laureate. It is still popularly known as the Howrah Bridge.",
          "image": "image-3.jpg"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            88.2636, 22.5958
          ]
        }
      },
      {
        "type": "Feature",
        "properties": {
          "title": "The Crown of India",
          "location": "Srinagar",
          "description": "Srinagar, popularly known as ‘Paradise on Earth’ and 'Venice of the East’, is situated in the beautiful valley of Kashmir. Located on the banks of the River Jhelum, the city is renowned for its beautiful lakes, houseboats and numerous Mughal gardens. The word Srinagar is a combination of two Sanskrit words, ‘Sri’ meaning wealth and ‘Nagar’ meaning place. Therefore, the literal meaning of the term 'Srinagar' is 'the city of wealth'.",
          "image": "image-4.jpg"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            74.7973, 34.0837
          ]
        }
      }
  ]
}

var mapFunctions = (function(){
    var currentPosition = 0;
    function defineMaps(){
        map = new google.maps.Map(document.getElementById('map-window'), {
            zoom: 10,
            mapTypeId: 'roadmap',
            disableDefaultUI: true
        });
    }
    function pushMarkersToArray(){
        for (var i = 0; i < mapLocationData.features.length; i++) {
            var coords = mapLocationData.features[i].geometry.coordinates;
            var latLng = new google.maps.LatLng(coords[1],coords[0]);
            var marker = new google.maps.Marker({
              position: latLng,
            });
            markersArray.push(marker);
        }
    };
    function setPosition(destinationPosition){
        currentPosition = destinationPosition;
    };
    function getPosition(){
        return mapFunctions.currentPosition;
    };
    function incrPosition(){
        mapFunctions.setPosition(currentPosition + 1);
    };
    function decrPosition(){
        mapFunctions.setPosition(currentPosition - 1);  
    };
    function resetPosition(){
        mapFunctions.setPosition(0);
    };
    function setMapCenter(){
        map.setCenter(markersArray[currentPosition].position)
    };
    function addMarker(){
                    marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    position: markersArray[currentPosition].position
                });
                marker.addListener('click', toggleBounce);
                function toggleBounce() {
                    if (marker.getAnimation() !== null) {
                    marker.setAnimation(null);
                    } 
                    else {
                        marker.setAnimation(google.maps.Animation.BOUNCE);
                    }
                }
    };
    function updatePageText(){
        var title = mapLocationData.features[currentPosition].properties.title;
        var description = mapLocationData.features[currentPosition].properties.description;
        var location = mapLocationData.features[currentPosition].properties.location;
        var imgSrc = mapLocationData.features[currentPosition].properties.image;
        document.getElementById("picture-title").innerHTML = title;
        document.getElementById("picture-description").innerHTML = description;
        document.getElementById("picture-location").innerHTML = location;
        document.getElementById("main-picture").src = imgSrc;
    };
    function nextLocationShow(){
        incrPosition();
        updatePageText();
        setMapCenter();
        addMarker();
    };
    function prevLocationShow(){
        decrPosition();
        updatePageText();
        setMapCenter();
        addMarker();
    };
    function render(){
        defineMaps();
        pushMarkersToArray();
        updatePageText();
        setMapCenter();
        addMarker();
    };
    return {
        setPosition: setPosition,
        getPosition: getPosition,
        incrPosition: incrPosition,
        decrPosition: decrPosition,
        resetPosition: resetPosition,
        addMarker: addMarker,
        nextLocationShow: nextLocationShow,
        prevLocationShow: prevLocationShow,
        render: render
    };
})();
\$\endgroup\$

Your Answer

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

Browse other questions tagged or ask your own question.