Forum | Appery.io

Hi, I have an jQuery app.
I have now added a MAP to one of my pages and i will like to get multiple markers from rest.

And how to get my own custom icon to eatch marker?

How to i do this?

This is what i have to know:'
Responce from my server:
http://hankipanki.net/dump/12-38-15-b...

Mapping:
http://hankipanki.net/dump/12-37-54-b...

Hello Hank,

Please check if there are any errors in the browser console. You can learn here: https://docs.appery.io/docs/using-bro... how to open the console.

Hi Hank,

An alternative solution is to save the data that came back in your success event - to a localStorage string.

You can do that by - in your success event - where you are reading your data and getting your results - by inserting the following code.

localStorage.setItem( 'sGPSEventsMapData', JSON.stringify( data ) ) ;

This will save the data from your service - to a local Storage variable (You can of course change the name).

You can then - it that same function if you desire - call a function to place the markers on the map..... ;like such....

fSetUserEventMap() ;

In a separate Javascript asset you can place some code to read the data from local Storage into an array - and then use the data - to place custom markers on your map.

below - some sample code that has a lot of examples of things you can do - to customize your map.... and the markers.... You can trim this back to the basics - or you can work through it - to use the code almost as is. Replace the map name with your Appery Map name from the designer. Replace the field names in the oUSerGpsHistory variables below - with those from your data source - that contain the lat and the lng. You can remove the info window code - if you don't need info windows (likely not...). The styled marker code is another Javascript asset - that I can drop below as well.....

var oUserGpsHistory = [];

function fSetUserEventMap() {
map = Apperyio("mUserHistory").gmap;
var bounds;
var sCurrentTimeStamp;
var oUserGpsPoints;
var nMarkerLng;
var nMarkerLat;
var oMarkerLatLng;
var oMarker;
var sContent;
var sTimeStamp;
var sDateStamp;

     var oGpsEventsMap = JSON.parse(fLocalGet('sGpsEventsMapData')); 
     bounds = new google.maps.LatLngBounds(); 
     map.set("disableDefaultUI", true); 
     map.set("zoomControl", true); 
     map.setMapTypeId('hybrid'); 
     map.setTilt(0); 
     oUserGpsHistory = oGpsEventsMap; 
     for (var i = 0; i < oUserGpsHistory.length; i++) { 
         nMarkerLng = oUserGpsHistory[i].location[0]; 
         nMarkerLat = oUserGpsHistory[i].location[1]; 
         oMarkerLatLng = new google.maps.LatLng(nMarkerLat, nMarkerLng); 
         sCurrentTimeStamp = oUserGpsHistory[i].timestamp; 
         sTimeStamp = fDisplayTimeSatus(sCurrentTimeStamp, 'time'); 
         sDateStamp = fDisplayTimeSatus(sCurrentTimeStamp, 'date'); 
         sContent = (i + 1).toString() + "." + " " + sDateStamp + ' ' + sTimeStamp; 
         sContent2 = '' + (i + 1).toString() + "." + '' + '' + " Time: " + '' + '' + sDateStamp + ', ' + sTimeStamp + '' + '' + 'Location: ' + '' + '' + nMarkerLat + ', ' + nMarkerLng + '' + '' + ' Speed: ' + '' + '' + Math.round(oUserGpsHistory[i].speed) + '' + '' + ' Accuracy: ' + '' + '' + oUserGpsHistory[i].accuracy + ''; 
         //create your marker 
         oStyleIcon = new StyledIcon(StyledIconTypes.MARKER, { 
             color: 'ffffff', 
             text: sContent 
         }); 
         //create your marker 
         oMarker = new StyledMarker({ 
             styleIcon: oStyleIcon, 
             position: oMarkerLatLng, 
             map: map, 
             draggable: false, 
             title: sContent, 
         }); 
         var infowindow = new google.maps.InfoWindow({ 
             content: sContent2 
         }); 
         fAttachInfoWindow(map, oMarker, infowindow); 
         aMarkers.push(oMarker); // markers are now stored in the array aMarkers 
         bounds.extend(aMarkers[i].getPosition()); // make sure the bounds shows all markers 
         map.fitBounds(bounds); // now adjust the view  
         map.panToBounds(bounds); // pan to the new bounds 
         google.maps.event.addListener(oMarker, 'dblclick', function() { 
             this.map.setZoom(16); 
         }); 
     } ///end of for loop 

 return true; 

}

the styled marker code - is from the source noted below in the code - please review and of course respect the license..... You can place this in a separate Javascript asset - called say 'StyledMarkersJS Code' or whatever you like....

/**

• @name StyledMarkerMaker

• @version 0.5

• @author Gabriel Schneider

• @copyright (c) 2010 Gabriel Schneider

• @fileoverview This gives you static functions for creating dynamically

• styled markers using Charts API outputs as well as an ability to

• extend with custom types.
  */

  /**

• Licensed under the Apache License, Version 2.0 (the 'License');

• you may not use this file except in compliance with the License.

• You may obtain a copy of the License at
  *

• http://www.apache.org/licenses/LICENS...
  *

• Unless required by applicable law or agreed to in writing, software

• distributed under the License is distributed on an 'AS IS' BASIS,

• WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.

• See the License for the specific language governing permissions and

• limitations under the License.
  */

  var StyledIconTypes = {};
  var StyledMarker, StyledIcon;

  /**

• @param {Function} childCtor Child class.

• @param {Function} parentCtor Parent class.
  */
  function inherits(childCtor, parentCtor) {
  /** @constructor */
  function tempCtor() {};
  tempCtor.prototype = parentCtor.prototype;
  childCtor.superClass_ = parentCtor.prototype;
  childCtor.prototype = new tempCtor();
  /** @override */
  childCtor.prototype.constructor = childCtor;
  }

  (function() {
  var bu_ = 'https://chart.googleapis.com/chart?chst=';
  var gm_ = google.maps;
  var gp_ = gm.Point;
  var ge = gm.event;
  var gmi = gm_.MarkerImage;

  /**

  • This class is an extended version of google.maps.Marker. It allows

    • styles to be applied that change it's appearance.

    • @extends google.maps.Marker

    • @param {StyledMarkerOptions} StyledMarkerOptions The options for the Marker
      */
      StyledMarker = function(styledMarkerOptions) {
      gm.Marker.call(this);
      var me = this;
      var ci = me.styleIcon = styledMarkerOptions.styleIcon;
      me.bindTo('icon', ci);
      me.bindTo('shadow', ci);
      me.bindTo('shape', ci);
      me.setOptions(styledMarkerOptions);
      };
      inherits(StyledMarker, gm.Marker);

      /**

    • This class stores style information that can be applied to StyledMarkers.

    • @extends google.maps.MVCObject

    • @param {StyledIconType} styledIconType The type of style this icon is.

    • @param {StyledIconOptions} styledIconOptions The options for this StyledIcon.

    • @param {StyledIcon} styleClass A class to apply extended style information.
      */
      StyledIcon = function(styledIconType, styledIconOptions, styleClass) {
      var k;
      var me = this;
      var i_ = 'icon';
      var sw_ = 'shadow';
      var s_ = 'shape';
      var a_ = [];

      function gs() {
      var image = document.createElement('img');
      var simage_ = document.createElement('img');
      ge.addDomListenerOnce(simage, 'load', function() {
      var w = simage.width,
      h = simage.height;
      me.set(sw, new gmi(styledIconType.getShadowURL(me), null, null, styledIconType.getShadowAnchor(me, w, h)));
      simage = null;
      });
      ge.addDomListenerOnce(image, 'load', function() {
      var w = image.width,
      h = image.height;
      me.set(i, new gmi(styledIconType.getURL(me), null, null, styledIconType.getAnchor(me, w, h)));
      me.set(s, styledIconType.getShape(me, w, h));
      image = null;
      });
      image.src = styledIconType.getURL(me);
      simage.src = styledIconType.getShadowURL(me);
      }

      /**

      • set:

      • This function sets a given style property to the given value.

      • @param {String} name The name of the property to set.

      • @param {Object} value The value to set the property to.

      • get:

      • This function gets a given style property.

      • @param {String} name The name of the property to get.

      • @return {Object}
        */
        me.as_ = function(v) {
        a_.push(v);
        for (var k in styledIconOptions) {
        v.set(k, styledIconOptions[k]);
        }
        };

        if (styledIconType !== StyledIconTypes.CLASS) {
        for (k in styledIconType.defaults) {
        me.set(k, styledIconType.defaults[k]);
        }
        me.setValues(styledIconOptions);
        me.set(i, styledIconType.getURL(me));
        me.set(sw, styledIconType.getShadowURL(me));
        if (styleClass) styleClass.as(me);
        gs();
        me.changed = function(k) {
        if (k !== i_ && k !== s_ && k !== sw) {
        gs();
        }
        };
        } else {
        me.setValues(styledIconOptions);
        me.changed = function(v) {
        styledIconOptions[v] = me.get(v);
        for (k = 0; k < a.length; k++) {
        a[k].set(v, me.get(v));
        }
        };
        if (styleClass) styleClass.as(me);
        }
        };
        StyledIcon.prototype = new gm.MVCObject();

      /**

    • StyledIconType

    • This class holds functions for building the information needed to style markers.

    • getURL:

    • This function builds and returns a URL to use for the Marker icon property.

    • @param {StyledIcon} icon The StyledIcon that holds style information

    • @return {String}

    • getShadowURL:

    • This function builds and returns a URL to use for the Marker shadow property.

    • @param {StyledIcon} icon The StyledIcon that holds style information

    • @return {String{

    • getAnchor:

    • This function builds and returns a Point to indicate where the marker is placed.

    • @param {StyledIcon} icon The StyledIcon that holds style information

    • @param {Number} width The width of the icon image.

    • @param {Number} height The height of the icon image.

    • @return {google.maps.Point}

    • getShadowAnchor:

    • This function builds and returns a Point to indicate where the shadow is placed.

    • @param {StyledIcon} icon The StyledIcon that holds style information

    • @param {Number} width The width of the shadow image.

    • @param {Number} height The height of the shadow image.

    • @return {google.maps.Point}

    • getShape:

    • This function builds and returns a MarkerShape to indicate where the Marker is clickable.

    • @param {StyledIcon} icon The StyledIcon that holds style information

    • @param {Number} width The width of the icon image.

    • @param {Number} height The height of the icon image.

    • @return {google.maps.MarkerShape}
      */

      StyledIconTypes.CLASS = {};

      StyledIconTypes.MARKER = {
      defaults: {
      text: '',
      color: '00ff00',
      fore: '000000',
      starcolor: null
      },
      getURL: function(props) {
      var url;
      var starcolor = props.get('starcolor');
      var text_ = props.get('text');
      var color_ = props.get('color').replace(/#/, '');
      var fore_ = props.get('fore').replace(/#/, '');
      if (starcolor_) {
      url = bu + 'd_map_xpin_letter&chld=pin_star|';
      } else {
      url = bu + 'd_map_pin_letter&chld=';
      }
      if (text) {
      text = text_.substr(0, 2);
      }
      url += text + '|';
      url += color + '|';
      url += fore;
      if (starcolor_) {
      url += '|' + starcolor.replace(/#/, '');
      }
      return url;
      },
      getShadowURL: function(props) {
      if (props.get('starcolor')) {
      return bu + 'd_map_xpin_shadow&chld=pin_star';
      } else {
      return bu_ + 'd_map_pin_shadow';
      }
      },
      getAnchor: function(props, width, height) {
      return new gp(width / 2, height);
      },
      getShadowAnchor: function(props, width, height) {
      return new gp(width / 4, height);
      },
      getShape: function(props, width, height) {
      var _iconmap = {};
      _iconmap.coord = [
      width / 2, height, (7 / 16) * width, (5 / 8) * height, (5 / 16) * width, (7 / 16) * height, (7 / 32) * width, (5 / 16) * height, (5 / 16) * width, (1 / 8) * height, (1 / 2) * width, 0, (11 / 16) * width, (1 / 8) * height, (25 / 32) * width, (5 / 16) * height, (11 / 16) * width, (7 / 16) * height, (9 / 16) * width, (5 / 8) * height];
      for (var i = 0; i < _iconmap.coord.length; i++) {
      iconmap.coord = Math.round(iconmap.coord);
      }
      _iconmap.type = 'poly';
      return _iconmap;
      }
      };
      StyledIconTypes.BUBBLE = {
      defaults: {
      text: '',
      color: '00ff00',
      fore: '000000'
      },
      getURL: function(props) {
      var url = bu + 'd_bubble_text_small&chld=bb|';
      _url += props.get('text') + '|';
      _url += props.get('color').replace(/#/, '') + '|';
      _url += props.get('fore').replace(/#/, '');
      return url;
      },
      getShadowURL: function(props) {
      return bu + 'd_bubble_text_small_shadow&chld=bb|' + props.get('text');
      },
      getAnchor: function(props, width, height) {
      return new google.maps.Point(0, 42);
      },
      getShadowAnchor: function(props, width, height) {
      return new google.maps.Point(0, 44);
      },
      getShape: function(props, width, height) {
      var _iconmap = {};
      _iconmap.coord = [
      0, 44,
      13, 26,
      13, 6,
      17, 1,
      width - 4, 1,
      width, 6,
      width, 21,
      width - 4, 26,
      21, 26];
      _iconmap.type = 'poly';
      return _iconmap;
      }
      };
      })();