Возникли проблемы с загрузкой карт Google на странице.

  • Автор темы underwit
  • 27
  • Обновлено
  • 12, May 2024
  • #1
Пожалуйста, посмотрите мой код ниже, я разобрался со всем своим кодом, чтобы он работал так, как я хочу, но по какой-то причине я просто не могу заставить его загружать карту, когда вы открываете ее в браузере.

Может ли кто-нибудь увидеть, где я ошибся, и помочь мне заставить это работать, пожалуйста.

Спасибо. 

 


<!DOCTYPE html>


<html>


<head>


<meta charset="utf-8">


<script type="text/javascript" src="[URL='https://lumtu.com/yti/ZwYYwZXNodHRwOi8vbWFwcy5nb29nbGVhcGlzLmNvbS9tYXBzL2FwaS9qcz9saWJyYXJpZXM9cGxhGc9']http://maps.googleapis.com/maps/api/js?libraries=places[/URL]"></script>


<script src="[URL='https://lumtu.com/yti/agLLganNodHRwczovL2FqYXguZ29vZ2xlYXBpcy5jb20vYWpheC9saWJzL2pxdWVyeS8xLjcuMi9qcXVlcnkubWluWbu']https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js[/URL]"></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 [URL='https://lumtu.com/yti/duMMudWtodHRwczovL3VrZGF0YXNlcnZpY2UuYWuU2']https://www.ukdataservice.ac.uk[/URL]


</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("[URL='https://lumtu.com/yti/NUiiUN0NodHRwOi8vY2hhcnQuYXBpcy5nb29nbGUuY29tL2NoYXJ0P2Noc3Q9ZF9tYXBfcGluX2xldHRlciZjaGxkPSVFMiU4MCVBMVCM']http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|[/URL]" + pinColor);


defaultPin = new google.maps.MarkerImage("[URL='https://lumtu.com/yti/NUiiUN0NodHRwOi8vY2hhcnQuYXBpcy5nb29nbGUuY29tL2NoYXJ0P2Noc3Q9ZF9tYXBfcGluX2xldHRlciZjaGxkPSVFMiU4MCVBMVCM']http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|[/URL]" + 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="Или сброс, если нет" value="Show All Markers"><br>


<input type="button" id="removemarker" title="Удалить выбранный маркер" value="Remove Marker"><br>


<input type="button" id="activatemarker" title="Активировать выбранный маркер" 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>
Код (разметка):
underwit

underwit

Пользователь
Рег
01 Jan, 2011
Тем
1
Постов
1
Баллов
11
Похожие темы Дата
Vue.js - Интенсивный курс для программистов от Дмитрия Лаврика (2017)
LoftSchool] Быстрый старт в AngularJs
[cyberbionic] Angular Js [2014]
Клиентский JavaScript. Руководство
[Seelentera] JavaScript. Уровень 2
Javascript advanced от cyberbionic
передача по ссылке не работает с использованием переменной массива 2d
как зациклить несколько изображений на одной странице/публикации
Что вы автоматизировали в своих процессах электронной коммерции?
Что не так с этой анимацией? CSS/JavaScript
Похожие темы
Vue.js - Интенсивный курс для программистов от Дмитрия Лаврика (2017)
LoftSchool] Быстрый старт в AngularJs
[cyberbionic] Angular Js [2014]
Клиентский JavaScript. Руководство
[Seelentera] JavaScript. Уровень 2
Javascript advanced от cyberbionic
передача по ссылке не работает с использованием переменной массива 2d
как зациклить несколько изображений на одной странице/публикации
Что вы автоматизировали в своих процессах электронной коммерции?
Что не так с этой анимацией? CSS/JavaScript
I AM

I AM


Лучший автор
Тем
49554
Комментарии
57426
Опыт
552966

Интересно