DMXzone Google Maps 2 Support Product Page
Answered
How to make map icons dynamic?
Asked 21 Nov 2014 01:40:01
1
has this question
21 Nov 2014 01:40:01 Baub Eis posted:
Is there a way to change the map icons dynamically? I have a field in my DB with the link to the map icon. But when I use html5 databindings it won't process the field correctly. Like it doesn't parse it from the db lookup. Replies
Replied 21 Nov 2014 17:26:02
21 Nov 2014 17:26:02 Baub Eis replied:
very basic map with points and custom markers I believe this should work. if i have a static custom map marker, ie "icons/default.png" the markers show up and have the correct graphic. If I use this page:
www.shopmilitarydiscounts.com/indexmaptestMiro.html
Here is the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Styles/dmxGoogleMaps.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript" src="ScriptLibrary/dmxDataBindings.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataSet.js"></script>
<script type="text/javascript">
/* dmxDataSet name "testMapData" */
jQuery.dmxDataSet(
{"id": "testMapData", "url": "admin.shopmilitarydiscounts.com/dmxDatabaseSources/remotedatabase.asp", "data": {"limit": "25"}, "siteName": "Shop Military Discounts - Admin", "dataSourceType": "database", "dataType": "jsonp"}
);
/* END dmxDataSet name "testMapData" */
</script>
<script type="text/javascript" src="ScriptLibrary/dmxGoogleMaps.js"></script>
</head>
<body>
<div class="dmxGoogleMaps" id="map1" style="width:600px;height:600px;">
</div>
<script type="text/javascript">
// <
.dmxGoogleMaps(
{"height": 600, "dataSource": "dmxDataSet", "dataSourceType": "dynamic", "repeatElement": "{{testMapData.data}}", "markers": [{"address": "{{discount_address1}},{{discount_city}},{{discount_state}}", "icon": {"image": "{{icon}}", "iconsize": [48, 48], "iconanchor": [24, 48]}}]}
);
}
);
// ]]>
</script>
<h1><div data-binding-id="repeat1" data-binding-repeat="testMapData.data">{{icon}}</div>
</h1>
</body>
</html>
if you look in the console it gets a 404 trying to find the graphic, its like it won't parse the record correctly in the dmxgooglemaps.js. This is how it shows up.
GET www.shopmilitarydiscounts.com/%7B%7Bicon%7D%7D 404 (Not Found)
www.shopmilitarydiscounts.com/indexmaptestMiro.html
Here is the code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="Styles/dmxGoogleMaps.css" />
<script type="text/javascript" src="ScriptLibrary/jquery-latest.pack.js"></script>
<script type="text/javascript" src="maps.google.com/maps/api/js?sensor=false"></script><script type="text/javascript" src="ScriptLibrary/dmxDataBindings.js"></script>
<script type="text/javascript" src="ScriptLibrary/dmxDataSet.js"></script>
<script type="text/javascript">
/* dmxDataSet name "testMapData" */
jQuery.dmxDataSet(
{"id": "testMapData", "url": "admin.shopmilitarydiscounts.com/dmxDatabaseSources/remotedatabase.asp", "data": {"limit": "25"}, "siteName": "Shop Military Discounts - Admin", "dataSourceType": "database", "dataType": "jsonp"}
);
/* END dmxDataSet name "testMapData" */
</script>
<script type="text/javascript" src="ScriptLibrary/dmxGoogleMaps.js"></script>
</head>
<body>
<div class="dmxGoogleMaps" id="map1" style="width:600px;height:600px;">
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#map1"
.dmxGoogleMaps({"height": 600, "dataSource": "dmxDataSet", "dataSourceType": "dynamic", "repeatElement": "{{testMapData.data}}", "markers": [{"address": "{{discount_address1}},{{discount_city}},{{discount_state}}", "icon": {"image": "{{icon}}", "iconsize": [48, 48], "iconanchor": [24, 48]}}]}
);
}
);
// ]]>
</script>
<h1><div data-binding-id="repeat1" data-binding-repeat="testMapData.data">{{icon}}</div>
</h1>
</body>
</html>
if you look in the console it gets a 404 trying to find the graphic, its like it won't parse the record correctly in the dmxgooglemaps.js. This is how it shows up.
GET www.shopmilitarydiscounts.com/%7B%7Bicon%7D%7D 404 (Not Found)
Replied 01 Dec 2014 21:58:30
01 Dec 2014 21:58:30 Baub Eis replied:
Any chance of getting this to work. This should really be an easy fix guys. Come on! 
I desperately need this to work!
I desperately need this to work! 
Replied 02 Dec 2014 10:15:37
02 Dec 2014 10:15:37 Teodor Kuduschiev replied:
Hello Baub,
Unfortunately this is not possible. There is even no a button to select a data bindings value for the marker in the UI.
Unfortunately this is not possible. There is even no a button to select a data bindings value for the marker in the UI.
Replied 02 Dec 2014 13:41:17
02 Dec 2014 13:41:17 Baub Eis replied:
I understand there is no button there. But dont' you think this is an option that other people might want also?
Replied 19 Dec 2014 17:43:57
19 Dec 2014 17:43:57 Teodor Kuduschiev replied:
Hi Baub,
Please update to the latest version. Now you can use {{icon}} in order to have dynamic marker icons
Please update to the latest version. Now you can use {{icon}} in order to have dynamic marker icons