标记未显示在Google地图中 [英] Markers are not showing in google map
本文介绍了标记未显示在Google地图中的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我试图在larvel项目的Google Map中的多个位置显示标记.我在控制器中添加了代码，并将locations传递给了查看页面.
I am trying to show markers in multiple locations in Google Map in larvel project.I have added code in controller and passed locations to view page.
以下是我刀片中的代码
@extends('user.layout.app')
@section('content')
<script src="{{ url('js/user/location.js') }}"></script>
<div class="container-fluid add-location">
<div class="row">
<div class="col-md-12">
<div class="card">
<form method="post" action="" name="clinicssview" id="clinicssview" enctype="multipart/form-data" novalidate>
{{ csrf_field() }}
<div class="card-header">
<h4 class="card-title"> View Clinics </h4>
</div>
@if(!empty($errors->all()))
<div class="row">
@foreach ($errors->all() as $error)
<div class="col-lg-12">
<div class="alert alert-danger"> <span>{{ $error }}</span> </div>
</div>
@endforeach
</div>
@endif
<div class="card-content">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-6">
<div class="form-group hide">
<label class="control-label">Location
<star>*</star>
</label>
<input id="pac-input" name="location" class="controls form-control" type="text" placeholder="Search Box">
<!-- <div id="map" height="1000" width="1000"></div> -->
</div>
<h4 >Preview</h4>
<div class="form-group">
<div id="regularMap" class="map"></div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Name
<star>*</star>
</label>
<input disabled id="user_name" name="user_name" class="controls form-control" type="text" placeholder="Clinc Name" value="{{$clinic->clinicName}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact First Name
<star>*</star>
</label>
<input disabled id="contact_fname" name="contact_fname" class="controls form-control" type="text" placeholder="Contact First Name" value="{{$clinic->clinicFname}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact Second Name
<star>*</star>
</label>
<input disabled id="contact_sname" name="contact_sname" class="controls form-control" type="text" placeholder="Contact Second Name" value="{{$clinic->clinicLname}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact Address
<star>*</star>
</label>
<input disabled id="contact_address" name="contact_adress" class="controls form-control" type="text" placeholder="Contact Address" value="{{$clinic->clinicAddress}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact City
<star>*</star>
</label>
<input disabled id="contact_city" name="contact_city" class="controls form-control" type="text" placeholder="City" value="{{$clinic->clinicCity}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Contact State
<star>*</star>
</label>
<input disabled id="contact_state" name="contact_state" class="controls form-control" type="text" placeholder="State" value="{{$clinic->clinicState}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Zip
<star>*</star>
</label>
<input disabled id="zip" name="zip" class="controls form-control" type="text" placeholder="Zip" value="{{$clinic->clinicZip}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
<label for="email" class="control-label">Email
<star>*</star>
</label>
<input disabled id="email" type="email" class="form-control" name="email" placeholder="Email" value="{{$clinic->clinicEmail}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Phone Number
<star>*</star>
</label>
<input disabled id="phone" name="phone" class="controls form-control" type="text" placeholder="Phone Number" value="{{$clinic->clinicPhone}}">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<label class="control-label">Clinic Website
<star>*</star>
</label>
<input disabled id="clinic_website" name="clinic_website" class="controls form-control" type="text" placeholder="Website" value="{{$clinic->clinicURL}}">
</div>
</div>
</div>
<div class="row"></div>
</form>
</div>
</div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/jskey=API_KEY">
</script>
<script type="text/javascript">
var locations = <?php echo $locations ?>;
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['locationLat'], locations[i]['locationLong']),
visible: true,
map: map
});
marker.setMap(map);
}
</script>
@endsection
但是标记未在位置中显示.我正在从数据库加载经度和纬度.请帮助我
But markers are not showing in locations. i am loading lattitude and longitudes from database. Please help me
推荐答案
您的Google地图和标记的JavaScript代码应位于window.onload函数内部
your javascript code of google map and marker should be inside window.onload function
<script type="text/javascript">
var locations = <?php echo $locations ?>;
window.onload = function(e){
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['locationLat'], locations[i]['locationLong']),
visible: true,
map: map
});
marker.setMap(map);
}
}
</script>
更新: https://developers.google.com/maps/documentation/javascript/adding-a-google-map
您还可以在Google库加载中使用回调参数.
You can also use callback parameter in your google library loading.
<script>
function initMap (){
var map = new google.maps.Map(document.getElementById('regularMap'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i]['locationLat'], locations[i]['locationLong']),
visible: true,
map: map
});
marker.setMap(map);
}
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
这篇关于标记未显示在Google地图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
