Printable Version of Topic
Click here to view this topic in its original format
HTMLHelp Forums _ Client-side Scripting _ Google Maps Legend
Posted by: IBMiGuy Mar 22 2017, 10:21 AM
First of all, I am not an HTML developer. I am an IBMi (midrange) developer.
I am writing HTML from a pgm to display a google map internally.
The user wants different size markers with different colors. That all works great.
Where my problem is creating a Legend with the markers.
The Legend is displayed with the label of the marker, but the marker itself is not displaying. Just an X.
The markers are display on the map just fine.
Before I post code is it ok for me to include the key that was issued for running the maps.
<script src="https://maps.googleapis.com/maps/api/js?key=MyKeyGoesHere"></script>
I am SO close to getting this working!
Sorry for being so naïve about HTML.
Thanks!!!!
Posted by: IBMiGuy Mar 22 2017, 11:53 AM
Here is the code without the key. MyKeyGoesHere
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Results Based On Verified Zip 60640-4405</title>
<style type="text/css">
#mapContainer {height: 650px;}
#mapCanvas {width: 100%; height: 100%;}
#legend {
font-family: Arial, sans-serif;
background: #fff;
padding: 10px;
margin: 10px;
border: 3px solid #000;
}
#legend h3 {margin-top: 0;}
#legend img {vertical-align: middle;}
</style>
</head>
<body>
<script src="https://maps.googleapis.com/maps/api/js?key=MyKeyGoesHere"></script>
<div id="legend"><h3>Legend</h3></div>
<script>
function initMap() {
var map;
var bounds = new google.maps.LatLngBounds();
var mapOptions = {mapTypeId: 'roadmap'}
map = new google.maps.Map(document.getElementById("mapCanvas"), mapOptions);
map.setTilt(50);
var pinBase = "http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=|"
var pins = [
[new google.maps.MarkerImage(pinBase + "FF0000", null, null, null, new google.maps.Size(21, 34)), "Retail"],
[new google.maps.MarkerImage(pinBase + "000000", null, null, null, new google.maps.Size(21, 34)), "Dormant"],
[new google.maps.MarkerImage(pinBase + "FFFF00", null, null, null, new google.maps.Size(21, 34)), "Potential"],
[new google.maps.MarkerImage(pinBase + "0000FF", null, null, null, new google.maps.Size(47, 73)), ">= $50,000.00"],
[new google.maps.MarkerImage(pinBase + "00FF00", null, null, null, new google.maps.Size(42, 68)), ">= $25,000.00"],
[new google.maps.MarkerImage(pinBase + "FF8800", null, null, null, new google.maps.Size(37, 63)), ">= $10,000.00"],
[new google.maps.MarkerImage(pinBase + "CCD1D1", null, null, null, new google.maps.Size(32, 58)), ">= $5,000.00"],
[new google.maps.MarkerImage(pinBase + "FF00EC", null, null, null, new google.maps.Size(27, 53)), ">= $1,000.00"],
[new google.maps.MarkerImage(pinBase + "00FBFF", null, null, null, new google.maps.Size(21, 34)), ">= $.00"]
];
var markers = [
['Test Company 1', 41.900910, -87.779030, 3, "S"],
['Test Company 2', 41.875250, -87.819520, 4, " "],
['Test Company 3', 41.918870, -87.768290, 5, "S"],
['Test Company 4', 42.084900, -87.782350, 5, " "],
['Test Company 5', 41.852660, -87.643040, 6, "S"],
['Test Company 6', 41.917000, -87.665410, 7, " "],
['Test Company 7', 41.918870, -87.768290, 1, " "],
['Test Company 8', 42.029620, -87.720900, 2, " "],
['Retail', 41.968580, -87.670920, 0, " "]
];
var infoWindowContent = [
['<div class="info content">' +
'<h3>Test Company 1</h3>' +
'<p>Distance: 7.3 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">' +
'<h3>Test Company 2</h3>' +
'<p>Distance: 10.0 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">' +
'<h3>Test Company 3</h3>' +
'<p>Distance: 6.1 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">' +
'<h3>Test Company 4</h3>' +
'<p>Distance: 9.9 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">' +
'<h3>Test Company 5</h3>' +
'<p>Distance: 8.1 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">' +
'<h3>Test Company 6</h3>' +
'<p>Distance: 3.6 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">' +
'<h3>Test Company 7</h3>' +
'<p>Distance: 6.1 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">' +
'<h3>Test Company 8</h3>' +
'<p>Distance: 4.9 Miles<br>' +
'</p>' +
'</div>'],
['<div class="info content">'+
'<h3>Retail</h3>'+
'</div>']
];
var infoWindow = new google.maps.InfoWindow(), marker, i;
for( i = 0; i < markers.length; i++ ) {
var position = new google.maps.LatLng(markers[i][1], markers[i][2]);
bounds.extend(position);
marker = new google.maps.Marker({
position: position,
map: map,
title: markers[i][0],
label: markers[i][4],
icon: pins[markers[i][3]][0]
});
google.maps.event.addListener(marker,'click', (function(marker,i) {
return function() {
infoWindow.setContent(infoWindowContent[i][0]);
infoWindow.open(map, marker);
}
})(marker, i));
map.fitBounds(bounds);
map.panToBounds(bounds);
}
var legend = document.getElementById('legend');
for (var key in pins) {
<!-- var type = pins[key][0]; -->
var name = pins[key][1];
var icon = pins[key][0];
var div = document.createElement('div');
div.innerHTML = '<img src="' + icon + '"> ' + name;
legend.appendChild(div);
}
map.controls[google.maps.ControlPosition.RIGHT_BOTTOM].push(legend);
var boundsListener = google.maps.event.addlistener((map),'bounds_changed', function(event) {
this.setZoom(14);
google.maps.event.removeListener(boundsListener);
});
}
google.maps.event.addDomListener(window, 'load',initMap);
</script>
<div id="mapContainer"> <div id="mapCanvas"> </div> </div>
</body>
</html>
Posted by: IBMiGuy Mar 31 2017, 03:21 PM
var icon = pins[key][0];
Should be
var icon = pins[key][0]["url"];
Posted by: pandy Mar 31 2017, 08:33 PM
Sorry you don't get any help, but I guess none of us regulars have worked with Google maps. 
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)