Change Pin Color Based on Users Pref.

8 posts by 3 authors in: Forums > CMS Builder
Last Post: April 25, 2012   (RSS)

By nmsinc - April 21, 2012

Our client needs to check & edit record address stops based on employee assignments. I have added fields for colors of pin and text in the users file - fields as follows:

map_pin_color

map_pin_text_color

The different map pin colors will help our client assign employees directly from the map grid. Each record loaded has a user assigned so what code changes need to be done below to complete this? - Thanks - nmsinc

<!-- Geocode for map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapCanvasId = 'map_canvas';
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
<?php
$pinNum = 0;
foreach ($claims_submissionRecords as $record) {
$pinNum++;
if (!$record['latitude'] || !$record['longitude']) { continue; }
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', {$pinNum}";
print " _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

//
function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, pinNum) {
var latLng = new google.maps.LatLng(latitude, longitude);
var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
var image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+pinNum+"|556677|000000";
var marker = new google.maps.Marker({ map: map, position: latLng, icon:image });
google.maps.event.addListener(marker, 'click', function() {
if (infowindowEl) {
infowindow.setContent(infowindowEl.innerHTML);
infowindow.open(map, marker);
}
else {
window.location = detailLink;
}
});
bounds.extend(latLng);
}

//
map.fitBounds(bounds);
}

</script>
nmsinc

Re: [nmsinc] Change Pin Color Based on Users Pref.

By Jason - April 22, 2012

Hi,

You'll need to make changes in a couple of places. First to the function that places a marker on the map, as well as the code that calls that function.

Try it with these changes, assuming your color fields are part of the claims_submissionRecords recordset:



<!-- Geocode for map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapCanvasId = 'map_canvas';
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
<?php
$pinNum = 0;
foreach ($claims_submissionRecords as $record) {
$pinNum++;
if (!$record['latitude'] || !$record['longitude']) { continue; }
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', {$pinNum}, {$record['map_pin_color']}, {$record['map_pin_text_color']}";
print " _geocoder_addMarker($jsFunctionArgs);\n";
}
?>

//
function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, pinNum, pinColor, pinTextColor) {
var latLng = new google.maps.LatLng(latitude, longitude);
var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
var image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+pinNum+"|"+pinColor+"|"+pinTextColor;
var marker = new google.maps.Marker({ map: map, position: latLng, icon:image });
google.maps.event.addListener(marker, 'click', function() {
if (infowindowEl) {
infowindow.setContent(infowindowEl.innerHTML);
infowindow.open(map, marker);
}
else {
window.location = detailLink;
}
});
bounds.extend(latLng);
}

//
map.fitBounds(bounds);
}

</script>


Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Change Pin Color Based on Users Pref.

By nmsinc - April 23, 2012

Hi Jason,[/#000000]

[/#000000]

[font "Tahoma"]The pin colors are assigned to users(adjusters), who are then assigned to the claims_submission record. You can see where I have attempted to code these using a sql_get for table1Record and table2Record, however I receive a unexpected T_VARIABLE error from this point on. Any suggestions?[/#000000]



Thanks – nmsinc

[/#000000]

<!-- Geocode for map -->
<script type="text/javascript" src="[/#000000]http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapCanvasId = 'map_canvas';
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
<?php
$pinNum = 0;
foreach ($claims_submissionRecords as $record) {
$pinNum++;
if (!$record['latitude'] || !$record['longitude']) { continue; }
[/#000000]$table1Record = mysql_get('accounts', $record['insurance_adjuster']);
$table2Record = mysql_get('accounts', $record['independent_adjuster']);
if (!$record['insurance_adjuster']
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', {$pinNum}, {$table1Record['map_pin_color']}, {$table1Record['map_pin_text_color']}";
[/#000000]else
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', {$pinNum}, {$table2Record['map_pin_color']}, {$table2Record['map_pin_text_color']}";
print " _geocoder_addMarker($jsFunctionArgs);\n";
}
?> [/#000000]

//
function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, pinNum, pinColor, pinTextColor) {
var latLng = new google.maps.LatLng(latitude, longitude);
var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
var image = "[/#000000]http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+pinNum+"|"+pinColor+"|"+pinTextColor;
var marker = new google.maps.Marker({ map: map, position: latLng, icon:image });
google.maps.event.addListener(marker, 'click', function() {
if (infowindowEl) {
infowindow.setContent(infowindowEl.innerHTML);
infowindow.open(map, marker);
}
else {
window.location = detailLink;
}
});
bounds.extend(latLng);
} [/#000000]

//
map.fitBounds(bounds);
} [/#000000]

</script> [/#000000]
nmsinc

Re: [nmsinc] Change Pin Color Based on Users Pref.

By Jason - April 24, 2012

Hi,

The problem here is you were missing a parentheses on your if statement.

Give this a try:

<!-- Geocode for map -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapCanvasId = 'map_canvas';
var mapOptions = { mapTypeId: google.maps.MapTypeId.ROADMAP };
var map = new google.maps.Map(document.getElementById(mapCanvasId), mapOptions);
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
<?php
$pinNum = 0;
foreach ($claims_submissionRecords as $record) {
$pinNum++;
if (!$record['latitude'] || !$record['longitude']) { continue; }
$table1Record = mysql_get('accounts', $record['insurance_adjuster']);
$table2Record = mysql_get('accounts', $record['independent_adjuster']);
if (!$record['insurance_adjuster']) {
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', {$pinNum}, {$table1Record['map_pin_color']}, {$table1Record['map_pin_text_color']}";
}
else {
$jsFunctionArgs = "{$record['latitude']}, {$record['longitude']}, {$record['num']}, '" .escapeJs($record['_link']). "', {$pinNum}, {$table2Record['map_pin_color']}, {$table2Record['map_pin_text_color']}";
}
print " _geocoder_addMarker($jsFunctionArgs);\n";

}
?>

//
function _geocoder_addMarker(latitude, longitude, recordNum, detailLink, pinNum, pinColor, pinTextColor) {
var latLng = new google.maps.LatLng(latitude, longitude);
var infowindowEl = document.getElementById('marker_infowindow_' + recordNum);
var image = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld="+pinNum+"|"+pinColor+"|"+pinTextColor;
var marker = new google.maps.Marker({ map: map, position: latLng, icon:image });
google.maps.event.addListener(marker, 'click', function() {
if (infowindowEl) {
infowindow.setContent(infowindowEl.innerHTML);
infowindow.open(map, marker);
}
else {
window.location = detailLink;
}
});
bounds.extend(latLng);
}

//
map.fitBounds(bounds);
}

</script>


Hope this helps
---------------------------------------------------
Jason Sauchuk - Project Manager
interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/

Re: [Jason] Change Pin Color Based on Users Pref.

By nmsinc - April 24, 2012

Hi Jason,

I made these corrections (thanks for catching those), however; I'm still having troubles with the page loading. I checked the error log and nothing is showing up. Anything else you can see with our code that would cause an error out?

Thanks - nmsinc
nmsinc

Re: [Jason] Change Pin Color Based on Users Pref.

By nmsinc - April 25, 2012

Hi Jason,

Can you send me your email address and I will send the url and user access!

Thanks - nmsinc
nmsinc

Re: [nmsinc] Change Pin Color Based on Users Pref.

By Damon - April 25, 2012

Hi,

You can send details to Jason at his email here:
jason@interactivetools.com

Thanks!
Cheers,
Damon Edis - interactivetools.com

Hire me! Save time by getting our experts to help with your project.
http://www.interactivetools.com/consulting/