Menu
I am trying to load a google map with some specific parmeters. I understand the problem is most likely that the initMap function needs to be declared globally. However, I have no idea how, even after searching a number of StackOverflow post with similar problems.
The rest
<script>
var databaseArray = [{id: 'BTS1', arfcn: '70', bsic: '29'}
,{id: 'BTS2', arfcn: '60', bsic: '28'}
,{id: 'BTS3', arfcn: '65', bsic: '27'}
,{id: 'BTS4', arfcn: '55', bsic: '26'}
,{id: 'BTS5', arfcn: '75', bsic: '29'}];
var locationArray = [{lat: '60.78064', lng: '10.67037'}
,{lat: '60.76978', lng: '10.66677'}
,{lat: '60.76991', lng: '10.69672'}
,{lat: '60.78889', lng: '10.68462'}
,{lat: '60.76086', lng: '10.65141'}];
function displayDatabase(){
var table1 = document.getElementById('database');
for (var i = 0; i < databaseArray.length; i++){
var bts = databaseArray[i];
var row = document.createElement('tr');
var properties = ['id', 'arfcn', 'bsic'];
for(var j = 0; j < properties.length; j++){
var cell = document.createElement('td');
cell.innerHTML = bts[properties[j]];
row.appendChild(cell);
}
table1.appendChild(row);
}
}
function displayLocations(){
var table2 = document.getElementById('location');
for (var i = 0; i < locationArray.length; i++){
var location = locationArray[i];
var row = document.createElement('tr');
var properties = ['lat', 'lng'];
for(var j = 0; j < properties.length; j++){
var cell = document.createElement('td');
cell.innerHTML = location[properties[j]];
row.appendChild(cell);
}
table2.appendChild(row);
}
}
</script>
<body>
<div id="container">
<div id="map"></div>
<div id="info">
<p>Her skal det så informasjon om cellen.</p>
</div>
</div>
<script>
displayDatabase();
displayLocations();
</script>
<script>
var map;
var bts = databaseArray[0];
var loc = locationArray[0];
var id1 = bts.id;
var arfcn1 = bts.arfcn;
var bsic1 = bts.bsic;
var latitude = loc.lat;
var longditude = loc.lng;
window.initMap = function() {
var MS = {lat: latitude, lng: longditude};
var radius = 500;
if(TA != 0){
radius = radius * (TA+1);
}
var BTS1 = {lat: 60.78064, lng: 10.67037};
var BTS2 = {lat: 60.76978, lng: 10.66677};
var BTS3 = {lat: 60.76991, lng: 10.69672};
var BTS4 = {lat: 60.78889, lng: 10.68462};
var BTS5 = {lat: 60.76086, lng: 10.65141};
var BTS8 = {lat: 60.79652, lng: 10.66857};
var mapOptions = {
zoom: 13,
center: BTS1
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
var image = 'tower1.png';
var spyware = 'spyware.png';
var circle = new google.maps.Circle({
strokeColor: '#FF0000',
strokeOpacity: 0.8,
strokeWeight: 2,
fillColor: '#FF0000'
fillOpacity: 0.35,
map: map,
center: MS,
radius: radius
});
var marker1 = new google.maps.Marker({
position: BTS1,
map: map,
title: 'BTS: 1',
icon: image
});
var marker2 = new google.maps.Marker({
position: BTS2,
map: map,
title: 'BTS: 2',
icon: image
});
var marker3 = new google.maps.Marker({
position: BTS3,
map: map,
title: 'BTS: 3',
icon: image
});
var marker4 = new google.maps.Marker({
position: BTS4,
map: map,
title: 'BTS: 4',
icon: image
});
var marker5 = new google.maps.Marker({
position: BTS5,
map: map,
title: 'BTS: 5',
icon: image
});
var infowindow1 = new google.maps.InfoWindow({
content: "<B>BTS: 1 <br> ARFCN: 70 <br> BSIC: 29</B> " //BCC 5
});
var infowindow2 = new google.maps.InfoWindow({
content: "<B>BTS: 2 <br> ARFCN: 60 <br> BSIC: 28</B> " //BCC 4
});
var infowindow3 = new google.maps.InfoWindow({
content: "<B>BTS: 3 <br> ARFCN: 65 <br> BSIC: 27</B> " //BCC 3
});
var infowindow4 = new google.maps.InfoWindow({
content: "<B>BTS: 4 <br> ARFCN: 55 <br> BSIC: 26</B> " //BCC 2
});
var infowindow5 = new google.maps.InfoWindow({
content: "<B>BTS: 5 <br> ARFCN: 75 <br> BSIC: 29</B> " //BCC 3
});
//=====Eventlistener for InfoWindow
google.maps.event.addListener(marker1, 'click', function() {
infowindow1.open(map,marker1);
});
google.maps.event.addListener(marker2, 'click', function() {
infowindow2.open(map,marker2);
});
google.maps.event.addListener(marker3, 'click', function() {
infowindow3.open(map,marker3);
});
google.maps.event.addListener(marker4, 'click', function() {
infowindow4.open(map,marker4);
});
google.maps.event.addListener(marker5, 'click', function() {
infowindow5.open(map,marker5);
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=API-key&callback=initMap"
async defer></script>
</body>
</html>
Thank you!
634
I copied your code but there are some syntax error. So i can't test. But your error is about initMap (of course :)).
Delete all code and check initMap and your window.initMap.
function initMap() {alert("ok");}
Is google callback works?
77
Found it... Though very late to the party...
If you downloaded the google maps js code from this link https://maps.googleapis.com/maps/api/js and then tried calling it using
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
There is bug in the development tools that the code gets modified.
Find the initMap in the downloaded file and replace whole file with ""
Or replace with a fresh copy form the above link and then lock the file or mark it as ReadOnly to avoid the same in future.
28
In my case the function was async and it was crashing since the initmap was being called but it was not loaded at that point yet. So you can just write async="false" as mentioned before:
<script async="false" type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=<YOUR KEY>-39Fxo&libraries=places&callback=initMap"></script>
Not a best way but it fixed my problem.
Call initMap() function manually as a fallback if ever the callback function wont work.
jQuery(document).ready(function($) {
initMap();
});
Hope this helps.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
