Добавлена реализация кода (только на стороне клиента).Но для того, чтобы работать должным образом, необходимо внести небольшие изменения.
- Отображение карты с маркерами с выделением POI пользователей
Это нужно сделать с помощью внутреннего сервера.При загрузке страницы получите данные в ответ от сервера и сохраните их в массиве markers.После загрузки выполните итерацию массива и добавьте маркеры при инициализации карты.
Каждый должен иметь возможность добавлять дополнительные маркеры (в идеале с заголовком, описанием и фотографией)
Добавлена функциональность в приведенном ниже коде.Но данные не будут храниться в бэкэнде (это необходимо реализовать в соответствии с требованиями).На данный момент данные маркера хранятся в локальном массиве markers.Обязательно добавляйте его в массив только после сохранения в базе данных.
Старые маркеры не должны быть изменены кем-либо, кроме Меня.
Добавлены эти функции (но только как статические).Необходимо проверить область действия пользователя перед редактированием / удалением маркеров, и это должно быть реализовано в соответствии с вашими требованиями.
Должен ли я беспокоиться о запросах API?Например, если установлено 100 маркеров и 1000 пользователей загружают веб-сайт, это уже приведет к 100 000 запросов?
Запросы API относятся только к картам, а не к маркерам.Согласно Руководствам Google , 25000 запросов бесплатны в течение 24 часов.Обратитесь к странице цен для получения дополнительной информации, если запрос превышает свободный лимит.
PS: 1. Добавьте свой ключ API в сценарий.2. Использовал Javascript Closures в сценариях.
<!DOCTYPE html>
<html>
<head>
<style>
.googlemap
{
margin : 0 auto;
height : 600px;
width : 600px;
}
.main_content
{
display: inline-block;
height: 100px;
}
.infowin
{
width:250px;
max-height:200px;
padding : 5px;
background: #fab9b9;
display:inline-block;
}
.infowin_img
{
float:left;
margin:0;
width:70px;
height: 100%;
background: #0db99e;
}
.infowin_img > img
{
height: 100%;
width: 70px;
}
.infowin_content
{
float: left;
margin:0;
background: #1e72d3;
height:100%;
width :180px;
color:white;
padding: 5px;
overflow: scroll;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.btn_div
{
bottom: 0;
width: 100%;
margin: 0 auto;
text-align: center;
}
.button
{
padding: 3px;
width:100px;
color:white;
cursor:pointer;
border-radius: 5px;
text-align: center;
display: inline-block;
}
.edit_btn
{
border: 1px solid #277107;
background: #2e8608;
}
.edit_btn:hover
{
background: #206004;
}
.remove_btn
{
border: 1px solid #e54646;
border-radius: 5px;
background: #dd5f5f;
}
.remove_btn:hover
{
background: #e32424;
}
</style>
</head>
<body>
<div id="googlemap" class="googlemap"></div>
<div id="form" hidden>
<table>
<tr><td>Name:</td> <td><input type='text' id='name'/> </td> </tr>
<tr><td>Description:</td> <td><input type='text' id='description'/> </td> </tr>
<tr><td>Image:</td> <td><input type='file' id='photo'/> </td> </tr>
<tr><td></td> <td><input type='button' value='Save' onclick="GoogleMap.saveLocation()"/> </td> </tr>
</table>
</div>
<div id="infowin" hidden>
<div class="infowin">
<div class="main_content">
<div class="infowin_img">
<img src="dummy.jpg">
</div>
<div class="infowin_content">
<span>PLACE_NAME</span><br>
<span>PLACE_DESCRIPTION</span><br>
<span>Added by : ADDED_BY</span>
</div>
</div>
<div class="btn_div">
<div class="button edit_btn" onclick="GoogleMap.editLocation()">Edit Location</div>
<div class="button remove_btn" onclick="GoogleMap.removeLocation()">Remove Location</div>
</div>
</div>
</div>
<script>
var CommonUtil = (function(){
return {
getInputValue : function(id){
return document.getElementById(id).value;
},
setInputValue : function(id, value){
document.getElementById(id).value = value;
}
};
})();
var GoogleMap = (function(){
var map, selectedmarker, markers=[], infowindow;
var formcontent = document.getElementById("form").innerHTML,
detailscontent = document.getElementById("infowin").innerHTML;
return {
initialize : function(){
map = new google.maps.Map(document.getElementById('googlemap'), {
center: new google.maps.LatLng(52.302516, 16.414546), //Setting Initial Position
zoom: 6,
});
map.addListener("click",function(event){
GoogleMap.addLocation(event.latLng);
})
},
addLocation : function(latlng){
var marker = new google.maps.Marker({
position: latlng,
map: map,
label: markers.length+1
});
marker.addListener("click",function(){
selectedmarker=this;
GoogleMap.showPlaceDetailsToUser(this);
});
GoogleMap.getPlaceDetailsFromUser(marker);
markers.push(marker);
selectedmarker=marker;
},
removeLocation : function(){
markers.splice(markers.indexOf(selectedmarker),1);
if(selectedmarker)
{
selectedmarker.setMap(null);
}
},
editLocation : function(){
GoogleMap.showPlaceDetailsToUser(selectedmarker,true);
CommonUtil.setInputValue("name",selectedmarker.placeInfo.name);
CommonUtil.setInputValue("description",selectedmarker.placeInfo.description);
CommonUtil.setInputValue("photo",selectedmarker.placeInfo.photo);
},
saveLocation : function(){
selectedmarker.placeInfo = selectedmarker.placeInfo || {};
selectedmarker.placeInfo.name = CommonUtil.getInputValue("name")
selectedmarker.placeInfo.description = CommonUtil.getInputValue("description");
selectedmarker.placeInfo.photo = CommonUtil.getInputValue("photo");
selectedmarker.placeInfo.addedBy = Math.random().toString(36).substr(2, 5);
GoogleMap.showPlaceDetailsToUser(selectedmarker);
},
getPlaceDetailsFromUser : function(marker){
GoogleMap.showInfoWindow(formcontent, marker);
},
showPlaceDetailsToUser : function(marker, isedit){
var content = marker.placeInfo && !isedit ? detailscontent.replace("PLACE_NAME",marker.placeInfo.name||"NO_NAME").replace("PLACE_DESCRIPTION",marker.placeInfo.description||"NO_DESCRIPTION").replace("ADDED_BY",marker.placeInfo.addedBy) : formcontent;
GoogleMap.showInfoWindow(content, marker);
},
showInfoWindow : function(content, marker){
if(infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content:content});
infowindow.open(map, marker);
}
}
})();
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=GoogleMap.initialize" type="text/javascript"></script>
</body>
</html>