Google Maps Legend |
Google Maps Legend |
IBMiGuy |
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!!!! |
IBMiGuy |
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> |
IBMiGuy |
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"]; |
pandy |
Mar 31 2017, 08:33 PM
Post
#4
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,730 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.
|
Lo-Fi Version | Time is now: 25th April 2024 - 01:33 AM |