I am having a similar issue but am not a coder and have no history of editing code. Recently our “pins” or “markers” disappeared from our generated maps. We can still hover the cursor over the location we know has a pin and the relevant information will populate. We know all the markers are there, we just can’t see them. Our software company says there is nothing they can do to help us with this, as it is no longer supported. Below I am posting the HTML that is generated when we request a map to be created from our ERP system. If anyone can tell me what lines I need to change so that markers appear, I would appreciate it.
`enter code here`<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Geocoding service</title>
<style>
html, body, #map-canvas {
height: 100%;
margin: 0px;
padding: 0px
}
#panel {
position: absolute;
top: 5px;
left: 90%;
margin-left: -180px;
z-index: 5;
background-color:rgba(0,0,0,0.0);
padding: 5px;
border: 1px solid #999;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=YOURKEY" ></script>
<script>
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(43.5000, -79.4000);
var mapOptions = {
zoom: 10,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
map.setCenter(latlng);
var zone1 = [
new google.maps.LatLng(43.661724780447464, -79.40986633300781),
new google.maps.LatLng(43.63390095551942, -79.39888000488281),
new google.maps.LatLng(43.674079889998026, -79.27494049072266),
new google.maps.LatLng(43.68202555115262, -79.27082061767578),
new google.maps.LatLng(43.70138869210391, -79.2550277709961),
new google.maps.LatLng(43.664891407668904, -79.41261291503906)
];
// Construct the polygon.
zone1Overlay = new google.maps.Polygon({
paths: zone1,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.35
});
zone1Overlay.setMap(map);
var zone2 = [
new google.maps.LatLng(43.63657210502274, -79.3996524810791),
new google.maps.LatLng(43.66545020689839, -79.41158294677734),
new google.maps.LatLng(43.649180812060614, -79.4849681854248),
new google.maps.LatLng(43.647628158508965, -79.4871997833252),
new google.maps.LatLng(43.64818711841115, -79.49149131774902),
new google.maps.LatLng(43.65017448927053, -79.49921607971191),
new google.maps.LatLng(43.63272064233465, -79.57423210144043),
new google.maps.LatLng(43.630049321633464, -79.57886695861816),
new google.maps.LatLng(43.62545188709195, -79.58539009094238),
new google.maps.LatLng(43.61507530341222, -79.59663391113281),
new google.maps.LatLng(43.605380589490174, -79.60521697998047),
new google.maps.LatLng(43.600532646526744, -79.61036682128906),
new google.maps.LatLng(43.598419318360335, -79.61380004882812),
new google.maps.LatLng(43.58915709303116, -79.6292495727539),
new google.maps.LatLng(43.55495532799957, -79.5809268951416),
new google.maps.LatLng(43.55451990763498, -79.57620620727539),
new google.maps.LatLng(43.58828674356127, -79.53706741333008),
new google.maps.LatLng(43.594689734637576, -79.50067520141602),
new google.maps.LatLng(43.60227297869274, -79.49543952941895),
new google.maps.LatLng(43.603640347220924, -79.4904613494873),
new google.maps.LatLng(43.610601014243, -79.48548316955566),
new google.maps.LatLng(43.61780942736571, -79.48445320129395),
new google.maps.LatLng(43.62445780095661, -79.47492599487305),
new google.maps.LatLng(43.63178879976124, -79.47020530700684),
new google.maps.LatLng(43.636385749608, -79.46059226989746),
new google.maps.LatLng(43.636013037044705, -79.44711685180664),
new google.maps.LatLng(43.628806806433296, -79.42625999450684),
new google.maps.LatLng(43.63390095551942, -79.40068244934082)
];
// Construct the polygon.
zone2Overlay = new google.maps.Polygon({
paths: zone2,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#EE00EE',
fillOpacity: 0.35
});
zone2Overlay.setMap(map);
var zone3 = [
new google.maps.LatLng(43.70672486904217, -79.398193359375),
new google.maps.LatLng(43.68823236681809, -79.39441680908203),
new google.maps.LatLng(43.670106664855, -79.38652038574219),
new google.maps.LatLng(43.67296244701336, -79.3758773803711),
new google.maps.LatLng(43.69580381224848, -79.2660140991211),
new google.maps.LatLng(43.704367081989325, -79.25193786621094),
new google.maps.LatLng(43.74394079318035, -79.21159744262695),
new google.maps.LatLng(43.74456086269517, -79.21382904052734),
new google.maps.LatLng(43.72483950684785, -79.30120468139648),
new google.maps.LatLng(43.726452188547015, -79.31751251220703),
new google.maps.LatLng(43.716403233539786, -79.35218811035156)
];
// Construct the polygon.
zone3Overlay = new google.maps.Polygon({
paths: zone3,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00EEEE',
fillOpacity: 0.35
});
zone3Overlay.setMap(map);
var zone4 = [
new google.maps.LatLng(43.67047916588633, -79.38634872436523),
new google.maps.LatLng(43.69319735695953, -79.39579010009766),
new google.maps.LatLng(43.70684896052867, -79.39836502075195),
new google.maps.LatLng(43.68624625567728, -79.49295043945312),
new google.maps.LatLng(43.68426007877438, -79.49913024902344),
new google.maps.LatLng(43.68363938500588, -79.5135498046875),
new google.maps.LatLng(43.68326696566219, -79.51887130737305),
new google.maps.LatLng(43.66960999321696, -79.58959579467773),
new google.maps.LatLng(43.64079600607349, -79.65585708618164),
new google.maps.LatLng(43.63408731864001, -79.6537971496582),
new google.maps.LatLng(43.617436599601476, -79.63199615478516),
new google.maps.LatLng(43.61258962830345, -79.63216781616211),
new google.maps.LatLng(43.600035399518525, -79.6453857421875),
new google.maps.LatLng(43.589592263046654, -79.62976455688477),
new google.maps.LatLng(43.60028402353632, -79.61053848266602),
new google.maps.LatLng(43.6159452654277, -79.5962905883789),
new google.maps.LatLng(43.62725362631232, -79.58307266235352),
new google.maps.LatLng(43.632969131247364, -79.5743179321289),
new google.maps.LatLng(43.65048501002724, -79.49895858764648),
new google.maps.LatLng(43.64750394449096, -79.48745727539062),
new google.maps.LatLng(43.64973975751403, -79.48402404785156)
];
// Construct the polygon.
zone4Overlay = new google.maps.Polygon({
paths: zone4,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#EEEE00',
fillOpacity: 0.35
});
zone4Overlay.setMap(map);
var zone5 = [
new google.maps.LatLng(43.70635259304132, -79.398193359375),
new google.maps.LatLng(43.75373714057318, -79.4088363647461),
new google.maps.LatLng(43.76315996157264, -79.38892364501953),
new google.maps.LatLng(43.76712702120528, -79.33639526367188),
new google.maps.LatLng(43.768614600741934, -79.30961608886719),
new google.maps.LatLng(43.78621481611622, -79.2337417602539),
new google.maps.LatLng(43.79488907226601, -79.20455932617188),
new google.maps.LatLng(43.80083640601217, -79.16988372802734),
new google.maps.LatLng(43.79464125384692, -79.15203094482422),
new google.maps.LatLng(43.74431283565998, -79.21005249023438),
new google.maps.LatLng(43.724963560827625, -79.30000305175781),
new google.maps.LatLng(43.726204086496104, -79.31922912597656),
new google.maps.LatLng(43.70808986126462, -79.39750671386719)
];
// Construct the polygon.
zone5Overlay = new google.maps.Polygon({
paths: zone5,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFA500',
fillOpacity: 0.35
});
zone5Overlay.setMap(map);
var zone6 = [
new google.maps.LatLng(43.75423311551578, -79.40849304199219),
new google.maps.LatLng(43.707097142731, -79.39750671386719),
new google.maps.LatLng(43.683763524273346, -79.49913024902344),
new google.maps.LatLng(43.6845083544836, -79.51801300048828),
new google.maps.LatLng(43.674079889998026, -79.56161499023438),
new google.maps.LatLng(43.67383157113291, -79.57740783691406),
new google.maps.LatLng(43.67283828539733, -79.58084106445312),
new google.maps.LatLng(43.69394207003054, -79.56779479980469),
new google.maps.LatLng(43.71057158566884, -79.55303192138672),
new google.maps.LatLng(43.71702358821485, -79.51904296875),
new google.maps.LatLng(43.71826427829778, -79.4974136352539),
new google.maps.LatLng(43.73091784974364, -79.44522857666016)
];
// Construct the polygon.
zone6Overlay = new google.maps.Polygon({
paths: zone6,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000EE',
fillOpacity: 0.35
});
zone6Overlay.setMap(map);
var zone7 = [
new google.maps.LatLng(43.753985128558305, -79.40849304199219),
new google.maps.LatLng(43.910507962317006, -79.44660186767578),
new google.maps.LatLng(43.93449490565162, -79.45415496826172),
new google.maps.LatLng(43.93919224634882, -79.4534683227539),
new google.maps.LatLng(43.984045507916974, -79.46393966674804),
new google.maps.LatLng(44.073280448966436, -79.48436737060547),
new google.maps.LatLng(44.090050985467414, -79.41123962402344),
new google.maps.LatLng(44.070073775703484, -79.40677642822265),
new google.maps.LatLng(44.09424287679715, -79.30892944335937),
new google.maps.LatLng(44.07476039341059, -79.30618286132812),
new google.maps.LatLng(43.873643201376815, -79.25983428955078),
new google.maps.LatLng(43.879582691206686, -79.23751831054687),
new google.maps.LatLng(43.878097874251736, -79.2330551147461),
new google.maps.LatLng(43.88873824478914, -79.1946029663086),
new google.maps.LatLng(43.89789239125797, -79.19322967529297),
new google.maps.LatLng(43.919658762067655, -79.1019058227539),
new google.maps.LatLng(43.9186695542589, -79.0964126586914),
new google.maps.LatLng(43.92138983615944, -79.09503936767578),
new google.maps.LatLng(43.93325870168863, -79.06688690185547),
new google.maps.LatLng(43.93177522301229, -79.04972076416015),
new google.maps.LatLng(43.97848702497319, -78.85608673095703),
new google.maps.LatLng(43.9942964557587, -78.86192321777344),
new google.maps.LatLng(44.00170567699189, -78.82759094238281),
new google.maps.LatLng(43.94858581451534, -78.80355834960937),
new google.maps.LatLng(43.951799062869824, -78.7939453125),
new google.maps.LatLng(43.866218006556394, -78.75652313232422),
new google.maps.LatLng(43.8686931742779, -78.78982543945312),
new google.maps.LatLng(43.869188195488455, -78.81282806396484),
new google.maps.LatLng(43.845917754377275, -78.90140533447265),
new google.maps.LatLng(43.85086967262752, -78.93573760986328),
new google.maps.LatLng(43.82858280301419, -78.97933959960937),
new google.maps.LatLng(43.80380985089954, -79.05899047851562),
new google.maps.LatLng(43.80975629669955, -79.09881591796875),
new google.maps.LatLng(43.78497553389676, -79.11941528320312),
new google.maps.LatLng(43.80034081747631, -79.17022705078125),
new google.maps.LatLng(43.793402146335886, -79.21794891357422),
new google.maps.LatLng(43.78398408962279, -79.23717498779297),
new google.maps.LatLng(43.76811874500704, -79.3106460571289),
new google.maps.LatLng(43.76563940467282, -79.37793731689453)
];
// Construct the polygon.
zone7Overlay = new google.maps.Polygon({
paths: zone7,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00EE00',
fillOpacity: 0.35
});
zone7Overlay.setMap(map);
var zone8 = [
n
paths: zone8,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#3366FF',
fillOpacity: 0.35
});
zone8Overlay.setMap(map);
}
function codeAddress() {
//var address = document.getElementById('address').value;
var numLocations = getQueryVariable("numDel");
var address ;
var pinColor;
var desc;
var pinImage;
var pinShadow ;
var my_position;
for(i = 1; i <= numLocations; i++ )
{
try
{
address = getQueryVariable("address".concat(i));
pinColor = getQueryVariable("color".concat(i));
desc = getQueryVariable("desc".concat(i));
my_position = new google.maps.LatLng(getQueryVariable("lat".concat(i))
,getQueryVariable("lng".concat(i)));
pinImage = new
google.maps.MarkerImage("http://chart.apis.google.com/chart?
chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
pinShadow = new
google.maps.MarkerImage("http://chart.apis.google.com/chart?
chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
var marker = new google.maps.Marker({
position: my_position,
map: map,
title: desc,
icon: pinImage,
shadow: pinShadow
});
}
catch (e)
{
}
}
}
function getQueryVariable(variable)
{
return document.getElementById(variable).innerHTML;
}
google.maps.event.addDomListener(window, 'load', initialize);
If anyone has a line of code they think will make the markers show back up on this generated map, I would appreciate the help.
Thank you.
New contributor
Avery Barker is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.