javascript - google maps is not rendering properly
问题描述
I am new in Gmap.I am trying to load may map in my html.but only a grey div is shown. see this image :image I know there are a lot of solutions and I have tried almost all of them.because I think this is because my dom is not loaded completely when google map is being loaded. for example I am trying to use google.maps.event.addDomListener(window, 'load', initialize_map); but I want something that listens to my specific div to load.not all of my html. here is my html :
<div ng-init=initMainMap()>
<div ng-show="selectMap" class="row" id="mapLoaded">
<!--<div class="sevenmargin" ng-include="'view/getAddress.html'"></div>-->
<!--<div id="yourMap"></div>-->
<div id="mapGoogle" style="height: 800px;
width: 1000px;
margin-right: 2%;
overflow: hidden;"></div>
<br>
<div class="form-group row">
<label class="col-lg-2 col-form-label">آدرس </label>
<div class="col-lg-10 input-group-check"
valid="{{!account.buy_address_map.$invalid}}">
<input type="text" name="buy_address_map" ng-model="buy_address_map"
ng-minlength="3" class="form-control controlinput"
placeholder="آدرس ">
</div>
</div>
</div>
</div>
and my js :
$scope.initMainMap = function () {
$scope.getFavoriteAddress()
var marker;
$scope.buy_address_map;
$scope.myLatLng = new google.maps.LatLng(32.64654244393823,51.66769295233155)
var shopLatLng = {
lat: parseFloat(JSON.parse(localStorage.getItem('shop_lat'))),
lng: parseFloat(JSON.parse(localStorage.getItem('shop_long')))
};
// var map = null;
var geocoder = null;
var directionsService = null;
var info;
var marker;
var mapOptions = {
center: shopLatLng,
zoom: 13,
mapTypeControl: false,
streetViewControl: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('mapGoogle'), mapOptions)
geocoder = new google.maps.Geocoder();
google.maps.event.addListenerOnce(map, 'idle', function(){
console.log("loaded")
});
//////// muliple autoroute multiple waypoints, multiple service //////////////
var routeService = "GOOGLE" //or OSM_YOURS
var routeMode = "drive" //bicycle, foot, ,motorcar //Google = BICYCLING
var routeMarkers = []; // for route legs/steps
var routeMarkersArray = []; //keep all routemarkers of differnt routes
var routeLinesArray = []; //keep all routeLines of differnt routes
addMarker(shopLatLng, false)
var setRM = 0;
setRouteMarker()
function setRouteMarker() {
if (setRM == 0) { //start a new route
// var prop = {};
// prop.style.color = "red";
// prop.style.fontWeight = "bold";
var temp = google.maps.event.addListener(map, 'click', function (event) {
addMarker(event.latLng, true)
});
directionsService = new google.maps.DirectionsService();
map.setOptions({draggableCursor: 'crosshair'});
setRM = 1;
} else { //finish a route
map.setOptions({draggableCursor: null});
google.maps.event.removeListener(temp);
routeMarkersArray.push(routeMarkers)
routeMarkers = [];
routeLinesArray.push(routeLines)
routeLinesArray = [];
var routeKM = 0;
setRM = 0;
}
}
var pinRed = {
url: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_red.png',
};
var pinYellow = {
url: 'http://maps.gstatic.com/mapfiles/ridefinder-images/mm_20_yellow.png',
};
// OSM YOURS DIRECTION Service//
function addMarker(latlng, drag) {
var mTitle = "wp: " + routeMarkers.length;
marker = new google.maps.Marker({
position: latlng,
icon: pinRed,
map: map,
//title: mTitle, //latlng.toUrlValue(6),
draggable: drag
})
marker.uid = routeMarkers.length;
addRouteMarkerListener();
routeMarkers.push(marker);
routeService = "GOOGLE"
routeMode = "drive";
if (routeMarkers.length > 1) {
if (routeService == "GOOGLE") {
calcGoogleRoute()
}
;
}
}
function addRouteMarkerListener() {
google.maps.event.addListener(marker, 'dragend', function (e) {
uid = this.uid;
console.log("wp:" + uid);
if (uid > 0) { //move route for middle and last marker
console.log("Route1")
moveRoute(uid - 1); // call sube for calc
if (uid < routeMarkers.length - 1) {
moveRoute(uid);
}
}
//move route for first point
if (uid == 0) {
routeLine = routeLines[0];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
if (routeService == "GOOGLE") {
calcGoogleRoute(1)
}
;
}
}); //< dragend
google.maps.event.addListener(marker, 'rightclick', function (e) {
uid = this.uid;
console.log("remove wp:" + uid);
if (uid == 0) {
console.log("do nothing")
}
else if (uid == routeMarkers.length - 1) {
routeMarkers[uid].setMap(null);
routeMarkers.splice(uid, 1); //delete first element
routeLine = routeLines[uid - 1];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
if (routeLines.length == 1) {
routeLines = [];
routeKM = 0;
// info.innerHTML = routeKM + " km / " + routeMarkers.length + " wpts";
} else {
routeLines.splice(uid - 1, 1);
}
}
// middle Marker (uid), del route before and after (uid - 1), calc new route
if (uid > 0 && uid < routeMarkers.length - 1) {
routeMarkers[uid].setMap(null);
routeMarkers.splice(uid, 1); //delete first element
//entfernt nachfolgende Route
console.log("Del nachfolgende Route: " + uid + " von gesamt Routen: " + routeLines.length)
routeLine = routeLines[uid];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
routeLines.splice(uid, 1);
renumber();
console.log("Del/Replace vorhergehende Route: " + (uid - 1) + " von gesamt Routen: " + routeLines.length);
routeLine = routeLines[uid - 1];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
console.log("calc neue Route: " + (uid - 1));
if (routeService == "GOOGLE") {
calcGoogleRoute(uid)
}
;
}
}); //< rightclick
} //< end routeMarkerListener
function renumber() {
console.log("renumber");
for (var i = 0; i < routeMarkers.length; i++) {
console.log("renumber Marker:" + i);
routeMarkers[i].uid = i;
routeMarkers[i].setTitle = "wp: " + i;
}
for (var i = 0; i < routeLines.length; i++) {
console.log("renumber Lines: " + i);
routeLine = routeLines[i]
routeLines.uid = i;
}
}
function moveRoute(uid) { //sub for dragend routemarker
console.log("Route2"); //routline after Marker
routeLine = routeLines[uid];
routeKM = routeKM - routeLine.km;
routeLine.setMap(null);
if (routeService == "GOOGLE") {
calcGoogleRoute(uid + 1)
}
;
}
function wait(ms) { //not in use
var start = new Date().getTime();
var end = start;
while (end < start + ms) {
end = new Date().getTime();
}
}
function httpGet(theUrl) {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", theUrl, false); //asyncron = true doesn't work correct.
xhttp.send();
var result = xhttp.responseText;
console.log("result", result)
return result;
//Notes from:http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
//Using async=false is not recommended, but for a few small requests this can be ok.
//Remember that the JavaScript will NOT continue to execute, until the server response is ready.
//If the server is busy or slow, the application will hang or stop.
//Note: When you use async=false, do NOT write an onreadystatechange function -
// just put the code after the send() statement:
}
function calcGoogleRoute(index) {
if (typeof(index) == 'undefined') {
index = "new";
var rStart = routeMarkers[routeMarkers.length - 2].getPosition();
var rEnd = routeMarkers[routeMarkers.length - 1].getPosition();
} else {
var rStart = routeMarkers[index - 1].getPosition();
var rEnd = routeMarkers[index - 0].getPosition();
}
request = {
origin: rStart,
destination: rEnd
};
if (routeMode == "drive") {
request.travelMode = google.maps.DirectionsTravelMode.DRIVING
}
directionsService.route(request, function (result, status) {
if (status == google.maps.DirectionsStatus.OK) {
path = result.routes[0].overview_path
var sumKM = 0;
var sumTime = 0;
var myroute = result.routes[0];
for (var i = 0; i < myroute.legs.length; i++) {
sumKM += myroute.legs[i].distance.value;
sumTime += myroute.legs[i].duration.value;
}
sumKM = sumKM / 1000;
console.log("Route calculated, write the route")
writeRoute(path, sumKM, index, sumTime)
} else if (status == google.maps.DirectionsStatus.ZERO_RESULTS) {
// alert("Could not find a route between these points");
} else {
// alert("Directions request failed");
}
});
}
var routeLine = null;
var routeLines = [];
var routeKM = 0;
var routeTime = 0;
function writeRoute(path, routekm, index, routetime) {
console.log("Write Route: " + (index - 1));
color = "grey"
if (routeService == "GOOGLE") {
color = 'blue'
}
;
if (routeService == "OSM_YOURS") {
color = 'grey'
}
;
var polyOptions = {
map: map,
path: path,
strokeColor: color,
strokeOpacity: 1.0,
strokeWeight: 3,
editable: false
};
routeLine = new google.maps.Polyline(polyOptions);
routeLine.km = routekm;
routeLine.service = routeService;
routeLine.mode = routeMode;
routeLine.uid = routeLines.length;
addRouteLineListener();
if (index == "new") {
console.log("new route:" + (routeLines.length));
routeLines.push(routeLine);
} else {
console.log("replace route:" + (index - 1));
routeLine.uid = index - 1;
routeLines[index - 1] = routeLine;
}
routeKM += routekm;
routeTime += routetime;
//u r ganna need this
// info.innerHTML = routeKM + " km / " + routeMarkers.length + " wpts / " + routeTime + " time";
var distance = routekm;
console.log("distance", distance);
}
var tempMarker = null;
function addRouteLineListener() {
google.maps.event.addListener(routeLine, 'click', function (event) {
//set temp marker and save route line id
lid = this.uid
latlng = event.latLng
geocoder.geocode({'latLng': latlng}, function (results, status) {
console.log("result for geocode", results[0].formatted_address)
if (status == google.maps.GeocoderStatus.Ok) {
if (result[0]) {
$('#latitude,#longitude').show();
$('#address').val(results[0].formatted_address);
$('#latitude').val(marker.getPosition().lat());
$('#longitude').val(marker.getPosition().lng());
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
$scope.buy_address_map = results[0].formatted_address
}
}
});
if (tempMarker) tempMarker.setMap(null);
tempMarker = new google.maps.Marker({
position: latlng,
icon: pinYellow,
map: map,
title: "Remove to insert Route",
draggable: true
})
tempMarker.lid = lid;
// set listener for temp marker
// rightclick del tempmarker
google.maps.event.addListener(tempMarker, 'rightclick', function () {
tempMarker.setMap(null);
})
//dragend replace temmarker und calc inserted routes
google.maps.event.addListener(tempMarker, 'dragend', function (e) {
//replace marker
lid = this.lid
latlng = e.latLng
if (tempMarker) tempMarker.setMap(null);
marker = new google.maps.Marker({
position: latlng,
icon: pinRed,
map: map,
//title: mTitle, //latlng.toUrlValue(6),
draggable: true
})
marker.uid = lid + 1;
addRouteMarkerListener();
routeMarkers.splice(lid + 1, 0, marker);
renumber();
// write first route
routeLine = routeLines[lid];
routeKM = routeKM - routeLine.km
routeLine.setMap(null);
routeService = document.getElementById("rtService").value;
routeMode = document.getElementById("rtMode").value;
if (routeService == "GOOGLE") {
calcGoogleRoute(lid + 1)
}
;
// write second route
routeLines.splice(lid + 1, 0, routeLines[lid]); //insert new item
renumber();
if (routeService == "GOOGLE") {
calcGoogleRoute(lid + 2)
}
;
console.log("routlines: " + routeLines.length);
})
});
}
}
解决方案
推荐阅读
- reactjs - React 中响应式导航菜单的问题
- .htaccess - htaccess 将子域重定向到子目录，在 url/地址栏中不重复
- reactjs - 如何使用 react-router 删除根路由上的尾随 /
- python - 如何替换从配置文件读取密钥的python脚本中的值
- php - 如何仅返回用户输入的日期范围内没有现有预订的属性的 ID？
- react-native - 通过 react-native 在 MapBox 地图上放置带有嵌套文本字段的透明视图
- algorithm - 是否有已知的算法来解决这类问题？
- rust - 如何将泛型 T 转换为字符串？
- rest - GetAll、GetMine、GetForUID 的宁静设计
- debian - sh脚本中日期的占位符？