JavaScript не может заставить карты Google работать с requirejs

Question

JavaScript не может заставить карты Google работать с requirejs

Я новичок в том, чтобы требовать js, я перепробовал все, что можно было найти на Google, в отношении карт Google и требовал js. Все остальное в порядке на моей странице, кроме карты Google, если я обновлю страницу, карта Google будет отображаться нормально, но при навигации по страницам — нет.

Вот мой main.js

require(['jquery','semantic','gmap'],function($,sm,gmap){
function initGMap(){
console.log('Initiating google maps');
//please ignore 'Info'
var myMap = new gmap.Map(document.getElementById('gmap-canvas'),{
center: new gmap.LatLng(Info.lat, Info.lon),
zoom: 15,
mapTypeId: gmap.MapTypeId.ROADMAP
});

var infowindow = new gmap.InfoWindow({
content: Info.contStr
});

var marker = new gmap.Marker({
position: new gmap.LatLng(Info.lat, Info.lon),
map: myMap,
title: 'My Title',

});

infowindow.open(myMap, marker);

gmap.event.addListener(marker, 'click', function() {
infowindow.open(myMap,marker);
});

$('#gmap-canvas').on('load',function(){
gmap.event.trigger(myMap, 'resize');
map.setZoom( myMap.getZoom() );
})

}
gmap.event.addDomListener(window, 'load', initGMap);
$(document).bind("projectLoadComplete",  initGMap);

});

Это то, что мой gmap.js похоже

define('gmap',['async!https://maps.googleapis.com/maps/api/js?key=API_KEY'],function(){
return window.google.maps;})

На странице нет другого файла сценария, кроме самого requirejs, использующего базовый тег сценария, например

<script data-main="scripts/main" type="text/JavaScript" src="scripts/require.js"></script>

Замечания: Я использую Semantic-UI, хотя, если это имеет какое-либо значение

ЛЮБЫЕ ПРЕДЛОЖЕНИЯ БУДУТ ПРИЗНАНЫ !!

1

google-maps javascript php requirejs semantic-ui

Решение

Другие решения

Других решений пока нет …

Источник

Accepted Answer

google.maps.event.addDomListener(window, 'load', initGMap); виновник в моем случае. Событие 'load' не запускается даже после завершения загрузки страницы, поэтому вместо того, чтобы использовать этот оператор, я позвонил initGMap() внутри $(document).ready(),

Полное решение для этого случая

новый gmap.js

define('gmap',['async!https://maps.googleapis.com/maps/api/js?key=API_KEY'],function(){

self.mapStart = function(){console.log('Initiating google maps');var myMap = new google.maps.Map(document.getElementById('gmap-canvas'),{
center: new google.maps.LatLng(Info.lat, Info.lon),
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow({
content: Info.contStr
});

var marker = new google.maps.Marker({
position: new google.maps.LatLng(Info.lat, Info.lon),
map: myMap,
title: 'My title',

});

infowindow.open(myMap, marker);

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(myMap,marker);
});

}

return self;
})

main.js

require(['gmap','jquery','semantic'],function(gmap,$,sm){$(document).ready(function(){
gmap.mapStart();
});

});

0