Jump to content
kwood30

having trouble in loading google maps on page

Recommended Posts

lease see my code below, I have sorted out all my coding to work how I want it too, but for some reason I just can't get it to load the map when you open it up in a browser. Can anyone see where I have gone wrong and guide me to get it work please. Thank you.

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<title>County Polygons + Markers w/elapsed time</title>
<script src="../fiveenglishcounties.js" charset="UTF-8">
// positioning codes © Copyright 2012 UK Data Service. All rights reserved Creative Commons License https://www.ukdataservice.ac.uk
</script>
<script type="text/javascript">
var map, bounds, geocoder, markers = [], pollies, pinImage, pinColor = '00FF00', defaultPinColor = 'F75850', defaultPin;
$('#controls input[name="[counties]"]').click(function(){
var poly = pollies[this.value];
if(poly.map){
poly.infowindow.close();
poly.setMap(null);
this.checked = false;
} else {
poly.setMap(map);
this.checked = true;
}
});

function elapsed(rfd) {
var rs = (new Date().getTime() - rfd.getTime()) / 1000,
days = Math.floor(rs / 86400),
hours = Math.floor((rs - (days * 86400 )) / 3600),
minutes = Math.floor((rs - (days * 86400 ) - (hours * 3600 )) / 60),
secs = Math.floor((rs - (days * 86400 ) - (hours * 3600 ) - (minutes * 60))),
fet = secs + 's';
if(minutes){fet = minutes + 'm' + ' ' + fet;}
if(hours){fet = hours + 'h' + ' ' + fet;}
if(days){fet = days + ' Day' + (days > 1? 's' : '') + ' ' + fet;}
return 'Created: ' + rfd.toLocaleTimeString().toLowerCase() + ',<br>' + fet + ' ago';
}
function createMarker(latlng, html, map) {
var ref = $.trim($('#reference').val()),
infowindow = new google.maps.InfoWindow({
content: ref || html
}),
marker = new google.maps.Marker({
map: map,
time : new Date(),
position: latlng,
html: html,
icon: defaultPin,
infowindow: infowindow
}),
$tm = $('#themarkers').append('<option value="' + html + '" title="' + infowindow.content + '">' + html + '</option>');
$tm.get(0).selectedIndex = 0;
marker.addListener('mouseover', function() {
clearInterval(infowindow.timer);
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content).fadeIn();
infowindow.timer = setInterval(function(){
infowindow.setContent((ref || html) + '<br>' + elapsed(marker.time));
$('#supplementwindow').html(infowindow.content);
}, 300);
infowindow.open(map, this);
});
marker.addListener('mouseout', function() {
clearInterval(infowindow.timer);
infowindow.close();
$('#supplementwindow').fadeOut();
});
marker.addListener('click', function() {
var oe = this.optel;
$tm.get(0).selectedIndex = $('option', $tm).index(oe);
$tm.trigger('change');
});
marker.optel = $('option', $tm).last();
$tm.get(0).size = $('option', $tm).length;
markers.push(marker);
}
$('#formcont form').submit(function(e){
var addresses = $('.address', this);
addresses = [addresses.eq(0).val(), addresses.eq(1).val()];
addresses.forEach(function(address, refnum) {
if (address) {
geocoder.geocode({
'address': address
}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
createMarker(results[0].geometry.location, address, map, refnum);
bounds.extend(results[0].geometry.location);
map.fitBounds(bounds);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
});
e.preventDefault();
});
$('#activatemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setIcon(pinImage);
return false;
}
});
});
$('#removemarker').click(function(){
var tm = $('#themarkers'), si = tm.get(0).options.selectedIndex, $o = $('option', tm).eq(si), i = $o.val();
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
v.setMap(null);
markers.splice(idx, 1);
return false; }
});
$o.remove();
bounds = new google.maps.LatLngBounds();
if(markers.length){
$.each(markers, function(i, v){
bounds.extend(v.position);
});
map.fitBounds(bounds);
}
if(markers.length < 2){
map.setZoom(markers.length? 13 : 8);
}
tm.get(0).size = $('option', tm).length;
});
$('#themarkers').change(function(){
this.title = this.options[this.options.selectedIndex].title;
var i = this.value;
if(!i){return;}
$.each(markers, function(idx, v){
if(v.html === i){
map.setCenter(v.position);
map.setZoom(10);
return false;
}
});
this.size = $('option', $(this)).length;
});
$('#showall').click(function(){
$('#themarkers').get(0).selectedIndex = 0;
if(!markers.length){
map.setCenter(new google.maps.LatLng(52.178227, -0.46013));
map.setZoom(8);
return;
}
map.fitBounds(bounds);
if(markers.length === 1){
map.setZoom(8);
}
});
function formatCodes(codeString){
var a = codeString.split(' '), l = a.length, po;
while(--l > -1){
po = a[l].split(',');
a[l] = {lat: +po[1], lng: +po[0]};
}
return a;}
function initMap() {
pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor);
defaultPin = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + defaultPinColor);
var p;
geocoder = new google.maps.Geocoder();
bounds = new google.maps.LatLngBounds();
map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: {lat: 52.178227, lng: -0.4013},
mapTypeId: google.maps.MapTypeId.ROADMAP
});
pollies = {
Bedfordshire: {
paths: BedfordshireCodes,
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000',
fillOpacity: 0.15,
latlng: {lat: 52.002974, lng: -0.465139}
},
Bedford: {
paths: BedfordCodes,
strokeColor: '#FFC0CB',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FFC0CB',
fillOpacity: 0.15,
latlng: {lat: 52.135973, lng: -0.466655}
},
Hertfordshire: {
paths: HertfordshireCodes,
strokeColor: '#FFFF55',
strokeOpacity: 0.9,
strokeWeight: 2,
fillColor: '#FFFF55',
fillOpacity: 0.25,
latlng: {lat: 51.809782, lng: -0.237674}
},
Cambridgeshire: {
paths: CambridgeshireCodes,
strokeColor: '#00FF00',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#00FF00',
fillOpacity: 0.15,
latlng: {lat: 52.305297, lng: 0.021820}
},
Northamptonshire: {
paths: NorthamptonshireCodes,
strokeColor: '#0000FF',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#0000FF',
fillOpacity: 0.15,
latlng: {lat: 52.272994, lng: -0.875552}
}
};
for(p in pollies){
var polly = pollies[p];
polly.paths = formatCodes(polly.paths);
polly = pollies[p] = new google.maps.Polygon(polly);
polly.infowindow = new google.maps.InfoWindow({
content: p,
position: polly.latlng
});
polly.addListener('click', function(){
if(this.infowindow.map){
this.infowindow.close();
} else {
this.infowindow.open(map, this);
}
});
polly.setMap(map); }

}
function initialize() {
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>

<div style="width:300px; height: 500px; float:right; padding-left:10px; padding-right:10px; margin: 50px 90px 50px 75px">
<h1 align="center">Map Search</h1>

<div id="formcont" style="border:1px solid #ccc; background:#e5e5e5; padding:10px;" align="center" >

<form>
<br>
Location 1 <input type="text" class="address">
<br>
<br>
Location 2
<input type="text" class="address">
<br>
<br>
Reference
<input type="text" id="reference">
<br>
<br>
<input type="submit" value="Submit">
</form>


</div>

<div style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;">
<label>Bedford: <input type="checkbox" checked name="[counties]" value="Bedford"> (pink)</label><br>
<label>Bedfordshire: <input type="checkbox" checked name="[counties]" value="Bedfordshire"> (red)</label><br>
<label>Hertfordshire: <input type="checkbox" checked name="[counties]" value="Hertfordshire"> (yellow)</label><br>
<label>Cambridgeshire: <input type="checkbox" checked name="[counties]" value="Cambridgeshire"> (green)</label><br>
<label>Northamptonshire: <input type="checkbox" checked name="[counties]" value="Northamptonshire"> (blue)</label>
</div>

<div id="dropsandbuttons" style="position: absolute; right: 200px; top: 500px; border: 1px solid #bbb; padding: 5px;
border-radius: 12px;"><select id="themarkers"><option value="">Select Marker</option>
</select><br>
<input type="button" id="showall" title="Or Reset if None" value="Show All Markers"><br>
<input type="button" id="removemarker" title="Remove Selected Marker" value="Remove Marker"><br>
<input type="button" id="activatemarker" title="Activate Selected Marker" value="Activate Marker">
</div>
</div>
<div id="map"></div>

<div id="supplementwindow" style="border:1px solid #ccc; background:#e5e5e5; align-content:center; float:left; clear: both position:absolute; margin:200px 0px 200px 200px; padding: 5px; border-radius: 12px;" ></div>



</body>
</html>

Share this post


Link to post
Share on other sites

have you tried looking for errors in browser's console? have you added any console logging to trace the execution of your code to see the point where it may have stopped working?

 

For future reference, I would highly recommend formatting and indenting your code in your posts, and if possible, try and whittle down the code sample to only what is needed to reproduce the issue. It's a proper problem solving technique rather than piling everything on the testing. Just tackle the problem one setup at a time and determine some sort of acceptance criteria that confidently reflects that the code is working as expected.

Share this post


Link to post
Share on other sites

$('#controls input[name="[counties]"]') where is element with id controls? never seen name attribute value using [...] before? maybe "counties[]".

 

if it was

<div id="controls" style="position: absolute; right: 170px; top: 365px; border: 1px solid #bbb; padding: 5px; border-radius: 12px;">
<label>Bedford: <input type="checkbox" checked name="counties[]" value="Bedford"> (pink)</label><br>
<label>Bedfordshire: <input type="checkbox" checked name="counties[]" value="Bedfordshire"> (red)</label><br>
<label>Hertfordshire: <input type="checkbox" checked name="counties[]" value="Hertfordshire"> (yellow)</label><br>
<label>Cambridgeshire: <input type="checkbox" checked name="counties[]" value="Cambridgeshire"> (green)</label><br>
<label>Northamptonshire: <input type="checkbox" checked name="counties[]" value="Northamptonshire"> (blue)</label>
</div>

I could understand it, with maybe

 

$('#controls input[type=checkbox]').

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...