Hello:
I have this service:
I want to get the coordinates where AIN or APN is specified and send that to a google map page I have that is locally hosted. The user will enter the AIN or APN on another site I also locally host which will then be sent to the google map page.
A query example:
How do I make a call for this in the script where the user enter the AIN or APN and then send the lat/long to the google map script using the ArcGIS JS API?
ArcGIS Server with JavaScript API
Solved! Go to Solution.
You could try changing this part
.then((results) => {
const latlon = results.features[0].attributes.LAT_LON;
console.log('results: ', latlon);
resultNode.innerHTML = latlon
const gmaps = 'https://www.google.com/maps/search/?api=1&query=' + latlon;
window.open(gmaps, '_blank');
})
to
.then((results) => {
const latlon = results.features[0].attributes.LAT_LON;
const arr = latlon.split(',');
const y = Double.parseDouble(arr[0]);
const x = Double.parseDouble(arr[1]);
map.setCenter({lat: x, lng: y})
})
The 'sendReq()' function I created could be integrated into the button you already have. You could define the url inside of the button function using the ain from the text input like you said above.
Edit: I just saw that the google maps script is separate. In that case you would need to do a post. It may be easier to integrate the two apps if they will be communicating with each other often.
Hi Brandon,
You can use query task and query the features.
Below is the example and reference
https://developers.arcgis.com/javascript/3/jsapi/querytask-amd.html
https://developers.arcgis.com/javascript/3/jssamples/query_nomap.html
And based on the result, you can make the google map url, and open it with
window.open('[your new url]', '_blank');
This is how you create google map url
https://www.google.com/maps/search/?api=1&query=58.698017,-152.522067
Here is a working example using the rest api
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>AIN to Google Maps</title>
<h1>AIN to Google Maps</h1>
<button id=requestButton>Request</button>
<div id="result"></div>
<script>
const ain = 272079004031; // you can change the AIN here
let url = "http://cache.gis.lacounty.gov/cache/rest/services/LACounty_Cache/LACounty_Parcel/MapServer/0/query?where=AIN+%3D+%" + ain + "%27&t&outFields=LAT_LON&f=pjson";
const button = document.getElementById("requestButton");
button.onclick = function () { sendReq() };
let resultNode = document.getElementById("result");
function sendReq() {
fetch(url, {
method: "GET"
})
.then((response) => {
if (response.status === 200) {
console.log("200 ok");
return response.json();
}
})
.then((results) => {
const latlon = results.features[0].attributes.LAT_LON;
console.log('results: ', latlon);
resultNode.innerHTML = latlon
const gmaps = 'https://www.google.com/maps/search/?api=1&query=' + latlon;
window.open(gmaps, '_blank');
})
.catch((err) => {
console.log("failed with: ", err);
});
}
</script>
</head>
<body>
</body>
</html>
Thanks Ben. This is awesome. I will have to take a look and see how I can use this with what I am trying to do. Have a good weekend.
Brandon Price
Geographic Information Systems Technician II
Los Angeles County Public Works
(626) 458-7092
bprice@pw.lacounty.gov<mailto:bprice@pw.lacounty.gov>
Your feedback is important to us. We encourage you to complete the
Customer Feedback Form at the following link: http://dpw.lacounty.gov/go/MPMSURVEY
If you have any questions about it implementing it for your use case let me know. I'm happy to help.
I already have a button in place that is running multiple functions from getting the ain value with a text input.
I would like to use something like const ain =$("#text").val(); to get the ain and fetch the lat longs with the url variable you made and send them to a google map script that I am locally hosting directly without adding any lat long results to the inner html. The google map script is very basic.The html and js for it is below. I would need maybe a postmessage to send the lat longs and an event listener to receive them unless there is a better way. I would then have to most likely use the map.setCenter({lat: x, lng: y}); method found in the google map api to re center the map with the coordinates received. The google map is an iframe on the page with the text input that I am trying to update when the user submits an ain value.
<div id="floating-panel">
<input id="address" type="textbox" value="900 S Fremont Ave">
<input id="submit" type="button" value="Search">
</div>
<div id="map"></div>
<script>
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 18,
center: {lat: 34.084914, lng: -118.150043},
mapTypeId: google.maps.MapTypeId.HYBRID,
labels: true,
tilt: 0
});
var geocoder = new google.maps.Geocoder();
document.getElementById('submit').addEventListener('click', function() {
geocodeAddress(geocoder, map);
});
}
function geocodeAddress(geocoder, resultsMap) {
var address = document.getElementById('address').value;
geocoder.geocode({'address': address}, function(results, status) {
if (status === 'OK') {
resultsMap.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: resultsMap,
position: results[0].geometry.location
});
} else {
alert('Search was not successful for the following reason: ' + status);
}
});
}
</script>
Any suggestions would be greatly appreciated. Thanks for the great help Ben.
You could try changing this part
.then((results) => {
const latlon = results.features[0].attributes.LAT_LON;
console.log('results: ', latlon);
resultNode.innerHTML = latlon
const gmaps = 'https://www.google.com/maps/search/?api=1&query=' + latlon;
window.open(gmaps, '_blank');
})
to
.then((results) => {
const latlon = results.features[0].attributes.LAT_LON;
const arr = latlon.split(',');
const y = Double.parseDouble(arr[0]);
const x = Double.parseDouble(arr[1]);
map.setCenter({lat: x, lng: y})
})
The 'sendReq()' function I created could be integrated into the button you already have. You could define the url inside of the button function using the ain from the text input like you said above.
Edit: I just saw that the google maps script is separate. In that case you would need to do a post. It may be easier to integrate the two apps if they will be communicating with each other often.
excellent Ben. This was awesome. I will post the final code soon hopefully. I will just run a function automatically when the postmessage is sent to the separate page.
Sorry. Just wondering if you had any last suggestions on the postmessage:
I am not sure if the postmessage is being sent because there is no callback although I believe it is going through. The event listener I know is wrong and needs work.
I am little concerned because nothing happens to the iframe even when I replace the receiveMessage function with the following alert: "alert("Hello! I am an alert box!!");".