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...
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;
Code: Select all
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
*
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;
}
};
})();