The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Google Maps Legend
IBMiGuy
post Mar 22 2017, 10:21 AM
Post #1





Group: Members
Posts: 3
Joined: 22-March 17
Member No.: 26,356



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!!!!
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
IBMiGuy
post Mar 22 2017, 11:53 AM
Post #2





Group: Members
Posts: 3
Joined: 22-March 17
Member No.: 26,356



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
IBMiGuy
post Mar 31 2017, 03:21 PM
Post #3





Group: Members
Posts: 3
Joined: 22-March 17
Member No.: 26,356



var icon = pins[key][0];

Should be
var icon = pins[key][0]["url"];
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Mar 31 2017, 08:33 PM
Post #4


🌟Computer says no🌟
********

Group: WDG Moderators
Posts: 20,716
Joined: 9-August 06
Member No.: 6



Sorry you don't get any help, but I guess none of us regulars have worked with Google maps. sad.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 28th March 2024 - 12:42 PM