Skip to content

Using maps part 3: getting all addresses to show as markers on the map #26

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
apluscs wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Using maps part 3: getting all addresses to show as markers on the map #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a79a20b
markers now show up on the page, one per city
apluscs Jun 11, 2020
83538b6
address is validated by checking existence of coordinates
apluscs Jun 11, 2020
027bff9
critical bug fixes
apluscs Jun 12, 2020
cc20f96
formatting tweaks
apluscs Jun 12, 2020
4c5b5f2
tweaks
apluscs Jun 12, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 17 additions & 9 deletions portfolio/src/main/java/com/google/sps/servlets/MarkerServlet.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,19 +14,21 @@

package com.google.sps.servlets;

import com.google.gson.Gson;
import com.google.appengine.api.datastore.DatastoreService;
import com.google.appengine.api.datastore.DatastoreServiceFactory;
import com.google.appengine.api.datastore.Entity;
import com.google.appengine.api.datastore.PreparedQuery;
import com.google.appengine.api.datastore.Query;
import com.google.appengine.api.users.UserService;
import com.google.appengine.api.users.UserServiceFactory;
import java.io.IOException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.google.gson.Gson;
import com.google.appengine.api.datastore.DatastoreService;
import com.google.appengine.api.datastore.DatastoreServiceFactory;
import com.google.appengine.api.datastore.Entity;
import com.google.appengine.api.datastore.PreparedQuery;
import com.google.appengine.api.datastore.Query;
import java.util.ArrayList;
import java.util.List;


@WebServlet("/markers")
Expand All @@ -37,12 +39,10 @@ private static class Marker {

private final double lat;
private final double lng;
private final String content;

public Marker(double lat, double lng, String content) {
public Marker(double lat, double lng) {
this.lat = lat;
this.lng = lng;
this.content = content;
}
}
private DatastoreService datastore;
Expand All @@ -54,6 +54,14 @@ public void init() {

@Override
public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
List<Marker> markers = new ArrayList<>();

for (Entity entity : (datastore.prepare(new Query("Marker")).asIterable())) {
markers.add(new Marker(Double.parseDouble((String) entity.getProperty("lat")),
Double.parseDouble((String) entity.getProperty("lng"))));
}
response.setContentType("application/json");
response.getWriter().println(new Gson().toJson(markers));
}

@Override
Expand Down
30 changes: 18 additions & 12 deletions portfolio/src/main/webapp/map.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,50 @@
// See the License for the specific language governing permissions and
// limitations under the License.

const API_KEY = "AIzaSyAxYeZWtbYyULIb5s59BaENaSpZD2Qr3RA";
const API_KEY = "AIzaSyDOLA6fsSWwR-ONnnzTR0FnjxWhXc33wJw";

function loadPage() {
createMap();
renderAddressForm();
renderMarkers(createMap());
activateAddressForm();
}

function renderAddressForm() {
function activateAddressForm() {
// On submit, address-form will convert city, state to lat, lng and POST that to datastore
document.getElementById('address-form').addEventListener('submit', (e) => {
// Need to preventDefault() so page doesn't refresh immediately.
e.preventDefault();
const formData = new FormData(e.target);
const city = formData.get("city").replace(' ', '+');
const state = formData.get("state").replace(' ', '+');
fetch("https://maps.googleapis.com/maps/api/geocode/json?address=" + city + "," + state + "&key=" + API_KEY)
.then((response) => response.json())
.then((json) => {
debugLog(json);
const lat = json.results[0].geometry.location.lat;
const lng = json.results[0].geometry.location.lng;
debugLog(lat);
debugLog(lng);
return fetch("/markers?lat=" + lat + "&lng=" + lng, {method: 'POST'})
return fetch(`/markers?lat=${json.results[0].geometry.location.lat}&lng=${json.results[0].geometry.location.lng}`,
{method: 'POST'});
})
.then((response) => {
if (response.redirected) {
window.location.href = response.url;
}
})
.catch((error) => {
debugLog('Error:', error);
alert('Error:', error);
});
});
}

function renderMarkers(map) {
fetch('/markers').then(response => response.json()).then((markers) => {
markers.forEach((marker) => {
new google.maps.Marker({position: {lat: marker.lat, lng: marker.lng}, map: map});
});
});
}

/** Creates a map in Aubergine style and adds it to the page. */
function createMap() {
const USCenterX = 38.5, USCenterY = -98;
const map = new google.maps.Map(
return new google.maps.Map(
document.getElementById('map'), {
center: {lat: USCenterX, lng: USCenterY},
zoom: 3,
Expand Down