Multiple Map Markers

I'm using gmaps.js which is a great short hand way of implementing google maps, I am thinking of using it in Perch templates with repeaters for the markers.

OK That's helpful thanks!

Has anyone else used Perch maps to generate multiple points?

Currently my JS looks like this (I'm using gmaps.js to generate maps):

map.addMarker({
        lat: -12.042,
        lng: -77.028333,
        visible: false,
        icon: './img/dryLiningDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),

No of course not.

Here is the code:

var map;
    $(document).ready(function(){
      map = new GMaps({
        el: '#map',
        lat: -12.043333,
        lng: -77.028333,
        zoom: 15,      
      });

 var styles = [
  {
    stylers: [
      { lightness: 20 },
      { saturation: -100}
    ]
  }
];

map.addStyle({
    styledMapName:"Styled Map",
    styles: styles,
    mapTypeId: "map_style"  
});

map.setStyle("map_style");



var dryLiningMarkers = [
      map.addMarker({
        lat: -12.042,
        lng: -77.028333,
        visible: false,
        icon: './img/dryLiningDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),

      map.addMarker({
        lat: -12.040,
        lng: -77.029,
        visible: false,
        icon: './img/dryLiningDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),

      map.addMarker({
        lat: -12.044,
        lng: -77.027,
        visible: false,
        icon: './img/dryLiningDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),
      map.addMarker({
        lat: -12.1,
        lng: -77.3,
        visible: false,
        icon: './img/dryLiningDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),
      ];

var fasciasMarkers = [
      map.addMarker({
        lat: -12.039,
        lng: -77.027,
        visible: false,
        icon: './img/fasciasDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),

      map.addMarker({
        lat: -12.044,
        lng: -77.022,
        visible: false,
        icon: './img/fasciasDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),

      map.addMarker({
        lat: -12.041,
        lng: -77.025,
        visible: false,
        icon: './img/fasciasDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),
      map.addMarker({
        lat: -12.12,
        lng: -77.35,
        visible: false,
        icon: './img/fasciasDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),
      ];

var glazingMarkers = [
      map.addMarker({
        lat: -12.034,
        lng: -77.020,
        visible: false,
        icon: './img/glazingDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),

      map.addMarker({
        lat: -12.040,
        lng: -77.029,
        visible: false,
        icon: './img/glazingDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),

      map.addMarker({
        lat: -12.044,
        lng: -77.027,
        visible: false,
        icon: './img/glazingDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),
      map.addMarker({
        lat: -12.1,
        lng: -77.3,
        visible: false,
        icon: './img/glazingDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),
      ];

var metalWorkMarkers = [
      map.addMarker({
        lat: -12.034,
        lng: -77.020,
        visible: false,
        icon: './img/metalWorkDot.gif',
        title: 'Marker with InfoWindow',
        infoWindow: {
          content: '<p>HTML Content</p>'
        }
      }),
      ];

var toggleVisibility = function(show, dryLiningMarkers){
           for (var i = 0, dryLiningLength = dryLiningMarkers.length; i < dryLiningLength; i++)
                dryLiningMarkers[i].setVisible(show);
        }

            $('#dryLiningToggle').on('change', function(){
                toggleVisibility(this.checked, dryLiningMarkers)
            });


var toggleVisibility = function(show, fasciasMarkers){
           for (var i = 0, fasciasLength = fasciasMarkers.length; i < fasciasLength; i++)
                fasciasMarkers[i].setVisible(show);
        }

            $('#fasciasToggle').on('change', function(){
                toggleVisibility(this.checked, fasciasMarkers)
            });


var toggleVisibility = function(show, glazingMarkers){
           for (var i = 0, glazingLength = glazingMarkers.length; i < glazingLength; i++)
                glazingMarkers[i].setVisible(show);
        }

            $('#glazingToggle').on('change', function(){
                toggleVisibility(this.checked, glazingMarkers)
            });


var toggleVisibility = function(show, metalWorkMarkers){
           for (var i = 0, metalWorkLength = metalWorkMarkers.length; i < metalWorkLength; i++)
                metalWorkMarkers[i].setVisible(show);
        }

            $('#metalWorkToggle').on('change', function(){
                toggleVisibility(this.checked, metalWorkMarkers)
            });

    });

This javascript functionality works just fine, its the integration with perch that I'm struggling to get started with.

Well I don't know where to start really as the output from the map generates 1 map per content item. I guess I will have to go an begin to rewrite public_maps.js and configure it to only output co-ordinates.

After that I will use this output in conjunction (incorporated) into the above javascript to finally output the map with multiple co-ordinates.

My basic start point is a repeater containing map items within it, allowing an easy process of adding multiple map markers. Once I can achieve the correct JS output as points I will add extra categories of markers as separate repeaters OR have a select in the region to define marker category.

Just looking in my perch/addons/fieldtypes and there is no example custom field type there.