Tarkotus oli tehdä sovellus joka hakee helsingin kaupungin palauterajapinnasta tietoa ja esittää ne google mapsillä. Mielestäni sovellus toimii riittävän hyvin mutta voisiko joku tarkistaa että se on tehty kunnolla, sillä aikasempaa js kokemusta minulla ei ole ja tämä on ensimmäinen työ minkä olen tehnyt
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 60.16985569999999, lng: 24.938379}, zoom: 12 });
var infowindow = new google.maps.InfoWindow({
content: ''
});
}
$(document).ready(function() {
fetchData();
});
function fetchData() {
//https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2016-01-01T00:00:00Z&extensions=true&status=closed---korjatut
$.get('https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2016-01-01T00:00:00Z&extensions=true&status=open', function(result)
{
renderData(result);
});
}
function renderData(json)
{
$.each(json,function(i) {
var tila;
var infowindow;
var marker;
var data = json[i],
latLng = new google.maps.LatLng(data.lat, data.long);
infowindow = new google.maps.InfoWindow();
marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
if(json[i].status === 'closed'){
tila = 'Korjaus pyyntö lähetetty';
}
else {
tila='Korjaus pyyntöä ei ole lähetetty';
}
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.close();
infowindow.setContent(json[i].description + '<br>Osoite: '+ json[i].address +'<br>Tila: '+ tila);
infowindow.open(map, marker);
}
})(marker, i));
})
}Koodissa et ladannut itse karttaa missään ( initMap(); ). Lisäsin myös pätkän koodia sille, että vanha infowindow sulkeutuu, kun klikkaa uutta merkkiä. Jäsensin myös vähän javascriptiäsi ja poistin turhia pätkiä koodista. Mutta muuten ihan soiva peli, eli varsin hyvä suoritus ensimmäiseksi javascript viljelmäksi! Ps. Muista myös kommentoida mitä koodissasi tapahtuu, jos tarkoitus on jakaa sitä, eikä ole vain omaan testi/harjoituskäyttöön.
(jotta pätkä voi toimia, tarvitaan seuraavanlainen html -kikkare)
<!-- nykyään google vaatii api -avainta, joten käykääs generoimassa itselle moinen --> <script async defer src="https://maps.googleapis.com/maps/api/js?key=API-AVAIN" type="text/javascript"></script> <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script> <!-- tolla kartan koolla nyt ei ole väliä, heitin vain jonkun --> <div id="map" style="width:100%;height:500px"></div>
var currentInfoWindow; //Auki oleva infowindow
var map; //karttaobjekti
$(document).ready(function() {
//Haetaan kartta
initMap();
//Haetaan palautteet
fetchData();
});
function initMap() {
map = new google.maps.Map(document.getElementById('map'), { center: {lat: 60.16985569999999, lng: 24.938379}, zoom: 12 });
}
function fetchData() {
$.get('https://asiointi.hel.fi/palautews/rest/v1/requests.json?start_date=2016-01-01T00:00:00Z&extensions=true&status=open', function(result)
{
renderData(result);
});
}
function renderData(json)
{
$.each(json,function(i) {
var data = json[i]
var latLng = new google.maps.LatLng(data.lat, data.long);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latLng,
map: map,
title: data.title
});
var tila = json[i].status === 'closed' ? 'Korjauspyyntö lähetetty' : 'Korjauspyyntöä ei ole lähetetty';
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//Jos joku infowindow on aiemmin avattu, suljetaan se
if(currentInfoWindow != null) {
currentInfoWindow.close();
}
//Uusi data infowindowiin
infowindow.setContent(createInfoWindowTemplate(json[i].description,
json[i].address,
tila)
);
//Avataan infowindow
infowindow.open(map, marker);
//Asetetaan uusi infowindow nykyiseksi
currentInfoWindow = infowindow;
}
})(marker, i));
});
}
//Html templatet on hyvä olla erikseen
function createInfoWindowTemplate(description,address, state) {
return description +
"<br>" +
"<hr>" +
"<b>Osoite: </b>" + address +
"<br>" +
"<b>Tila: </b>" + state;
}Halutessasi, tuota projektiasi on myös helppo laajentaa ottamalla street viewit mukaan:
function renderData(json)
{
$.each(json,function(i) {
var data = json[i]
var latLng = new google.maps.LatLng(data.lat, data.long);
var infowindow = new google.maps.InfoWindow();
var marker = new google.maps.Marker({
position: latLng,
title: data.title,
map: map
});
var tila = json[i].status === 'closed' ? 'Korjauspyyntö lähetetty' : 'Korjauspyyntöä ei ole lähetetty';
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//Jos joku infowindow on aiemmin avattu, suljetaan se
if(currentInfoWindow != null) {
currentInfoWindow.close();
}
//Uusi data infowindowiin ja placeholder panoraamalle
infowindow.setContent(createInfoWindowTemplate(json[i].service_request_id,
json[i].description,
json[i].address,
tila)
);
//Avataan infowindow
infowindow.open(map, marker);
//Haetaan panoraama, ja lisätään se diviin jossa id sama kuin service_request_id
var panorama = new google.maps.StreetViewPanorama(
document.getElementById(json[i].service_request_id), {
position: latLng,
pov: {
heading: 34,
pitch: 10
}
});
map.setStreetView(panorama);
//Asetetaan uusi infowindow nykyiseksi
currentInfoWindow = infowindow;
}
})(marker, i));
});
}
//Html templatet on hyvä olla erikseen
function createInfoWindowTemplate(id, description,address, state) {
var streetViewStyle = "style='margin:20px;width:200px;height:200px;float:left;'";
var identity = "id='" + id + "'";
return "<div " + identity + streetViewStyle + "></div>" + description +
"<br>" +
"<hr>" +
"<b>Osoite: </b>" + address +
"<br>" +
"<b>Tila: </b>" + state;
}Kiitos paljon :)
Aihe on jo aika vanha, joten et voi enää vastata siihen.