Missing dynamic Markers GMaps V3 - ajax

I have written some code to fetch zipcodes from a mysql db via ajax call, geocode them, then make markers out of them on a GMap. The markers are clickable to reveal some demographic data. It works if i leave the alert in the each loop uncommented. If not it only shows about 8 markers. Any and all help is appreciated. Relevant code:
function initialize() {
var geocoder = new google.maps.Geocoder();
var markers = [];
var latlng = new google.maps.LatLng("33.7463915", "-117.86044720000001");
var myOptions = {
zoom: 11,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
$.ajax({
url: 'getzips.php',
dataType: 'json',
success: function (data) {
$.each(data.rows, function(i, item) {
//alert(item.zip);
if (geocoder) {
geocoder.geocode({ 'address': item.zip }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latlng = new google.maps.LatLng(results[0].geometry.location.lat(), results[0].geometry.location.lng());
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: item.zip
});
var infowindow = new google.maps.InfoWindow({
content: item.zip
});
google.maps.event.addListener(marker, "click", function() {
$.ajax({
url: 'getinfo.php?zipcode=' + marker.title,
success: function(data){
infowindow.setContent(data);
infowindow.open(map, marker);
}
});
});
markers.push(marker);
}
});
}
else
alert("geocode error");
});
}
});
//alert(markers.length);
}

Google Geocoding API has both query and rate limits. You need to slow down when querying.
Use of the Google Geocoding API is subject to a query limit of 2,500 geolocation requests per day.
Additionally, we enforce a request rate limit to prevent abuse of the service.

Related

How to enable Global settings in geoserver

I have been trying to implement wfs-t service in openlayers3 in system. I can able to see the
<wfs:FeatureCollection xmlns="http://www.opengis.net/wfs" xmlns:wfs="http://www.opengis.net/wfs" xmlns:sf="http://www.openplans.org/spearfish" xmlns:gml="http://www.opengis.net/gml" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.0.0/WFS-basic.xsd http://www.openplans.org/spearfish http://localhost:9999/geoserver/sf/wfs?service=WFS&version=1.0.0&request=DescribeFeatureType&typeName=sf%3AAPRoad50MMI2015">
<gml:boundedBy>
<gml:Box srsName="EPSG:4326">
<gml:coordinates xmlns:gml="http://www.opengis.net/gml" decimal="." cs="," ts=" ">76.771293,12.625601 84.727878,19.166098</gml:coordinates>
</gml:Box>
My XML for the delete from my geoserver with featureID are:
<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd"><Delete typeName="feature:jktouristspots50poi2015" xmlns:feature="http://172.31.4.67:9999/geoserver/mywork"><Filter xmlns="http://www.opengis.net/ogc"><FeatureId fid="jktouristspots50poi2015.55"/></Filter></Delete></Transaction>
1. My geoserver deatails:
Build Information
GeoServer Version
2.11.1
Git Revision
0628848420a522efc1c6bbd90cb3346038929f6a
Build Date
18-May-2017 22:36
GeoTools Version
17.1 (rev 86d8efab5104df08c81acf7b2f2342e08c9dea4b)
GeoWebCache Version
1.11.0 (rev 1.11.x/02b79570ae64d548f9fb39bcab5edc9cb4d0c992)
For the above WFS request i have set my ajax function like below:
<script type="text/javascript">
var formatWFS = new ol.format.WFS();
var formatGML = new ol.format.GML({
featureNS: 'http://localhost:9999/geoserver/mywork',
featureType: 'jktouristspots50poi2015',
srsName: 'EPSG:4326'
});
alert("GML",formatGML);
var xs = new XMLSerializer();
var sourceWFS = new ol.source.Vector({
loader: function (extent, resolution, projection) {
var url = 'http://localhost:9999/geoserver/mywork/wfs?service=WFS&' +
'version=1.1.0&request=GetFeature&typename=mywork:jktouristspots50poi2015&' +
'outputFormat=text/javascript&srsname=EPSG:4326&' +
'bbox=' + extent.join(',') + ',EPSG:4326';
alert(url);
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: 'callback:loadFeatures',
jsonp: 'format_options'
}).done(function (response) {
alert("i am done");
});
},
strategy: ol.loadingstrategy.bbox
});
window.loadFeatures = function (response) {
layerWFS
.getSource()
.addFeatures(new ol.format.GeoJSON().readFeatures(response));
};
var layerWFS = new ol.layer.Vector({
source: sourceWFS
});
var interaction;
var interactionSelectPointerMove = new ol.interaction.Select({
condition: ol.events.condition.pointerMove
});
var interactionSelect = new ol.interaction.Select({
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#FF2828'
})
})
});
var interactionSnap = new ol.interaction.Snap({
source: layerWFS.getSource()
});
var map = new ol.Map({
target: 'map',
controls: [],
interactions: [
interactionSelectPointerMove,
new ol.interaction.MouseWheelZoom(),
new ol.interaction.DragPan()
],
layers: [
new ol.layer.Tile({
title: 'India',
source: new ol.source.TileWMS({
url: 'http://ndem.nrsc.gov.in/geoserver_v3/ndem50k/wms',
params: {LAYERS: 'ndem50k:stateadmin50census2011'}
})
}),
layerWFS
],
view: new ol.View({
projection: 'EPSG:4326',
center: [82.491,21.899],
zoom: 5
})
});
//wfs-t
var dirty = {};
var transactWFS = function (mode, f) {
var node;
switch (mode) {
case 'insert':
node = formatWFS.writeTransaction([f], null, null, formatGML);
alert("after insert node",node);
break;
case 'update':
node = formatWFS.writeTransaction(null, [f], null, formatGML);
break;
case 'delete':
node = formatWFS.writeTransaction(null, null, [f], formatGML);
break;
}
var payload = xs.serializeToString(node);
<!-- '<Transaction xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd"><Delete typeName="feature:jktouristspots50poi2015" xmlns:feature="http://172.31.4.67:9999/geoserver/mywork"><Filter xmlns="http://www.opengis.net/ogc"><FeatureId fid="jktouristspots50poi2015.55"/></Filter></Delete></Transaction>'; -->
alert(payload);
$.ajax('http://localhost:9999/geoserver/mywork/ows', {
service: 'WFS',
type: 'POST',
dataType: 'xml',
processData: true,
contentType: 'text/xml',
data: {data:payload}
}).done(function() {
alert("gekki hi ");
console.log("indside done");
sourceWFS.clear();
});
alert("out i am"+payload);
};
$('button').click(function () {
alert();
$(this).siblings().removeClass('btn-active');
$(this).addClass('btn-active');
map.removeInteraction(interaction);
interactionSelect.getFeatures().clear();
map.removeInteraction(interactionSelect);
switch ($(this).attr('id')) {
case 'btnEdit':
map.addInteraction(interactionSelect);
interaction = new ol.interaction.Modify({
features: interactionSelect.getFeatures()
});
alert("am edit "+interaction);
map.addInteraction(interaction);
map.addInteraction(interactionSnap);
dirty = {};
interactionSelect.getFeatures().on('add', function (e) {
e.element.on('change', function (e) {
//alert("i am add ");
dirty[e.target.getId()] = true;
});
});
interactionSelect.getFeatures().on('remove', function (e) {
var f = e.element;
if (dirty[f.getId()]) {
alert("i am in remove");
delete dirty[f.getId()];
var featureProperties = f.getProperties();
delete featureProperties.boundedBy;
var clone = new ol.Feature(featureProperties);
clone.setId(f.getId());
transactWFS('update', clone);
}
});
break;
case 'btnPoint':
interaction = new ol.interaction.Draw({
type: 'Point',
source: layerWFS.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function (e) {
transactWFS('insert', e.feature);
});
break;
case 'btnLine':
alert("line feature draw");
interaction = new ol.interaction.Draw({
type: 'LineString',
source: layerWFS.getSource()
});
map.addInteraction(interaction);
interaction.on('drawend', function (e) {
var myAttrValue = prompt("Enter Attribute", "");
var myFeature= e.feature;
if (myAttrValue != null) {
myFeature.set('column', myAttrValue);
}
transactWFS('insert', myFeature);
});
break;
case 'btnArea':
interaction = new ol.interaction.Draw({
type: 'Polygon',
source: layerWFS.getSource()
});
interaction.on('drawend', function (e) {
transactWFS('insert', e.feature);
});
map.addInteraction(interaction);
break;
case 'btnDelete':
interaction = new ol.interaction.Select();
interaction.getFeatures().on('add', function (e) {
transactWFS('delete', e.target.item(0));
interactionSelectPointerMove.getFeatures().clear();
interaction.getFeatures().clear();
});
map.addInteraction(interaction);
break;
default:
break;
}
});
</script>
How can i enable global setting in geoserver, what is ows? If i pass the existing path also its throwing error like:
PATH OF MY WORKSPACE IN GEOSERVER:
C:\Program Files (x86)\GeoServer 2.11.1\data_dir\workspaces\mywork\jktourisam
wfs-t.jpg
postgislayer.html:1 XMLHttpRequest cannot load http://localhost:9999/geoserver/mywork/wfs.
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 403.
I have tried many ways, i couldn't find the solution.......
I was able to view the added WFS vector layer on my map. Is there any parameter wrong in my code? Mean while i have tested WFS-T with same url of layer from my geoserver, at there also i cant delete and insert features to geoserver and postgres, but i can able to draw on map by using that polygon,line and point features on map and can able to retrieve the feature id? I want to implement CQL and ECQL filters also in my code kindly provide any reference links to learn. Thank you
Mean while alerting success from ajax call(POST) is also not working, i think it was because of the wrong url i am pass? Is it correct? Please guide me to set environment in geoserver to perform wfs-t..
You need to enable CORS in your container. See this question if you are using Jetty as your container, or this question if you use tomcat.

Google maps - Javascript - How to enable click marker listener if is using a cellphone to active gps directions

I have a questions, currently I have in a webpage some markers that I get from a xml file using position of latitude and longitude.
So I would like to know how to enable to option of the marker listener to activate or show the option to send the user using the cellphone directions (gps). Like in android it I click on the marker it shows the option to activate gps directions, but on web I don't know how.
So for each direction if is clicked send the current position to the gps directions app of the cellphone.
Currlently I have this code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 12
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
// Change this depending on the name of your PHP or XML file
downloadUrl('https://www.mysite/dataMaps.php', function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute('name');
var address = markerElem.getAttribute('address');
var type = markerElem.getAttribute('type');
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var infowincontent = document.createElement('div');
var strong = document.createElement('strong');
strong.textContent = name
infowincontent.appendChild(strong);
infowincontent.appendChild(document.createElement('br'));
var text = document.createElement('text');
text.textContent = address
infowincontent.appendChild(text);
var icon = customLabel[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
label: icon.label
});
marker.addListener('click', function() {
infoWindow.setContent(infowincontent);
infoWindow.open(map, marker);
//map.setCenter(marker.getPosition());
});
});
});
}
And
I foun this in google site:
function displayRoute(origin, destination, service, display) {
service.route({
origin: origin,
destination: destination,
waypoints: [{location: 'Adelaide, SA'}, {location: 'Broken Hill, NSW'}],
travelMode: 'DRIVING',
avoidTolls: true
}, function(response, status) {
if (status === 'OK') {
display.setDirections(response);
} else {
alert('Could not display directions due to: ' + status);
}
});
}
But in waypoints: not sure how to send the latitude and longitude parameters and if it will work on mobile devices to trigger the gps directions app :S
Any suggestions?
Finally I saw how, in the infowindow you just need to add this:
nav
I found it here: Is there a way to invoke navigation from mobile browser?

Trouble Adding Markers to Google Maps via Ajax

What I am trying to achieve:
Generate Map
Get Bounds information for Map
Make Ajax call passing Bounds information, data returned is Marker info
Populate Map with Markers
I am stuck because I cannot get the Ajax call to trigger.
The code seems to stop running after the alert("ajax ready"). I have a breakpoint on my controller action which never gets hit.
The only error I am getting is that "nE is undefined", however if I put in an alert the line after I am setting the value, then the the value is shown, so am not even sure that is relevant.
I have worked successfully with an earlier version of Google Maps, V3 seems a bit different. I couldn't get the lines of code to set the bounds to run until they were placed in an event listener. I tried the same with the Ajax call but doesn't make a difference.
I do know that I am not adding the markers to the map within the ajax call, I have yet to get to that part.
Javascript:
function initMap() {
var markers = [];
var map = new google.maps.Map(document.getElementById('local-map'), {
center: { lat: 51.509865, lng: -0.118092 },
zoom: 15
});
var bounds = undefined;
var nE = undefined;
var sW = undefined;
google.maps.event.addListener(map, 'bounds_changed', function () {
bounds = map.getBounds();
nE = bounds.getNorthEast();
sW = bounds.getSouthWest();
});
alert("ajax ready");
$.ajax({
type: "POST",
url: '/Home/GetMapMarkers',
data: { neLatitude: nE.lat(), neLongitude: ne.lng(), swLatitude: sW.lat(), swLongitude: sW.lng() }
}).done(function (data) {
for (i = 0; i < data.length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
map: map,
title: data[i].RestaurantName
});
markers.push(marker);
}
});
}
The "bounds_changed" listener will fire asynchronously when the map bounds changes. You need to put your AJAX call inside its callback function (when/where the new bounds is available):
google.maps.event.addListener(map, 'bounds_changed', function () {
bounds = map.getBounds();
nE = bounds.getNorthEast();
sW = bounds.getSouthWest();
alert("ajax ready");
$.ajax({
type: "POST",
url: '/Home/GetMapMarkers',
data: { neLatitude: nE.lat(), neLongitude: ne.lng(), swLatitude: sW.lat(), swLongitude: sW.lng() }
}).done(function (data) {
for (i = 0; i < data.length; i++)
{
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data[i].Latitude, data[i].Longitude),
map: map,
title: data[i].RestaurantName
});
markers.push(marker);
}
});
});

Ajax Request with Googlemap API

I'm building a page that will display a Googlemap with markers. Since I have about 50000 markers, I decided not to load them all at once.
Therefore I tried building an JSON request to my server (see code below) but here is my problem:
When I use the code as it is presented here, the Map is blank (no Map shows up).
When I remove the $.ajax and leave the function getMarkers emtpy, the map shows properly (whitout marker of course).
Can anyone tell me what I'm doing wrong please?!
Thank you!
(If that is any help, I'm using Django)
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init_map() {
var mapOptions = {
center: new google.maps.LatLng(48.853,2.35),
zoom: 6,
streetViewControl: false,
};
var myMap = new google.maps.Map(document.getElementById("map-container"),mapOptions);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(myMap, 'idle', getMarkers);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
initialLocation = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(initialLocation);
});
}
}
google.maps.event.addDomListener(window, 'load', init_map);
function getMarkers() {
$.ajax({
type: 'POST',
url: {%url 'pointslink'%},
async: "true",
dataType: "json",
contentType: 'application/json',
data: JSON.stringify(
coords: myMap.getBounds(),
zoom: myMmap.getZoom()
),
success: updateMarkers
});
}
function updateMarkers(data) {
{% for city in data %}
var pos = new google.maps.LatLng({{city.latitude}},{{city.longitude}});
var marker = new google.maps.Marker({
position: pos,
map: myMap,
title:'{{city.name}}'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent('Name: {{city.name}}<br/>Population: {{city.population}}');
infowindow.open(myMap, this);
});
{%endfor%}
}
</script>

ember ajax calls with promisses access result in templates and controller

I'm making a call to the server to get some data via an ajax request and I use a promise. While my template automatically updates as soon as the data is returned, I'm unlucky accessing the data in the controller, as I don't know exactly when it's there.
To resolve I can make an additional ajax call in the controller to get the same data but that feels ugly. Is there a nicer way to know when to access the data in the controller? As a work around I tried to call the function that needs the data on the didInsertElement but that didn't solve it.
App.ActiveDataSet = Ember.Object.extend({
progress: 0
});
App.ActiveDataSet.reopenClass({
findAll: function(project_id) {
var result = [];
$.ajax({
url: '/active_data_sets.json',
type: 'GET',
data: {'project_id': project_id}
}).then(function(response) {
response.active_data_sets.forEach(function(newset) {
result.addObject(App.ActiveDataSet.create(newset));
});
});
return result;
}
});
App.MapviewShowRoute = Ember.Route.extend({
setupController: function(controller, model) {
this.controllerFor('activedatasetIndex').set('content', App.ActiveDataSet.findAll(model.id));
}
});
App.MapviewShowController = Ember.ObjectController.extend({
needs: ['activedatasetIndex'],
content: null,
dataSets: [],
createDataSets: function() {
// create the datasets
for (var counter = 0; counter < this.get('controllers.activedatasetIndex.content').length; counter++) {
alert(dataSets[counter].ds.name);
}
}
});
App.MapviewShowView = Ember.View.extend({
map: null,
didInsertElement: function() {
var map = null;
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(52.368892, 4.875183),
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
},
navigationControl: true,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(this.$('#map_canvas').get(0), myOptions);
this.set('map', map); //save for future updations
var h = $(window).height(),
offsetTop = 60; // Calculate the top offset
$('#map_canvas').css('height', (h - offsetTop));
// get the datasets
this.controller.createDataSets();
}
});
Have you tried continuing the promises chain:
App.ActiveDataSet.reopenClass({
findAll: function(project_id) {
return $.ajax({
url: '/active_data_sets.json',
type: 'GET',
data: {'project_id': project_id}
}).then(function(response) {
var result = [];
response.active_data_sets.forEach(function(newset) {
result.addObject(App.ActiveDataSet.create(newset));
});
return result;
});
}
});
App.MapviewShowRoute = Ember.Route.extend({
setupController: function(controller, model) {
App.ActiveDataSet.findAll(model.id).then(function(content) {
this.controllerFor('activedatasetIndex').set('content', content);
});
}
});

Resources