As rails 3.2.18 postGIS enabled application needs to capture polygon data from google maps API.
The js is as follows:
var poly, map;
var markers = [];
var path = new google.maps.MVCArray;
function initialize() {
var roma = new google.maps.LatLng(41.877, 12.480);
map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: roma,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
poly = new google.maps.Polygon({
strokeWeight: 3,
fillColor: '#5555FF'
});
poly.setMap(map);
poly.setPaths(new google.maps.MVCArray([path]));
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(event) {
path.insertAt(path.length, event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: true
});
markers.push(marker);
marker.setTitle("#" + path.length);
google.maps.event.addListener(marker, 'click', function() {
marker.setMap(null);
for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
markers.splice(i, 1);
path.removeAt(i);
}
);
google.maps.event.addListener(marker, 'dragend', function() {
for (var i = 0, I = markers.length; i < I && markers[i] != marker; ++i);
path.setAt(i, marker.getPosition());
}
);
}
While the map generates the polygon, I would like to, in a first instance view the LatLng points (to track what is being generated), but ultimately save the points.
A first issue is LatLng (Google) vs Lon/Lat (PostGIS). While there is always the possibility of flipping the data, I'd just assume avoid it. THis would imply some parsing of the data.
So how can the polygon points get captured to the database, individually or as a LonLat-formatted polygon? [Bear in mind I'm really not proficient in js...]
I'd probably want to make an AJAX request to a ruby script that would then save the details to the DB. You can access the individual latitude and longitude values from your event like so:
event.latLng.lat()
event.latLng.lng()
Or indeed use the lat() and lng() functions on anything that returns a LatLng object. See the docs: https://developers.google.com/maps/documentation/javascript/reference#LatLng
Related
First thing is I will tell you I am new to google maps and some of it is very confusing to me. What I need to do is show a users location and have the appropriate markers show up. I have the database all ready and somewhat of the Google map.
What I am working with is an example from here. What I can either get is the markers if I use a static LatLng or just the users dynamic location with no markers.
Need help please. And if you downvote this post please let me know why.
Code I am using can be found at https://jsfiddle.net/8q1apmdy/9/ and show where in the blow code is where I am missing something, most likely small or in the wrong position.
function initMap() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition((position) => {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
});
var map = new google.maps.Map(document.getElementById('map'), {
center: pos,
zoom: 12
});
}
a) While running your code locally, I was getting 'pos' undefined, so I moved the following code 'var map = new google.maps.Map(..' inside the getCurrentPosition(){...
b) Then I got another error ' InvalidValueError: setMap: not an instance of Map;' so created a 'var map' globally.
Loaded the map successfully, but still markers were not loaded. while debugging your code at this point 'var marker = new google.maps.Marker({...' it is iterating for all markers from xml but somehow markers are not adding to the map..dont know the reason yet?
So I have tried in a different way. Please see all markers from xml displayed on map. Here I am just getting the 'name' in marker, you might need to add other parameters like id, address etc.
JSFiddle added for reference
var infowindow;
var map;
//var downloadUrl;
function initialize() {
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(-33.868820, 151.209290),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map'), mapOptions);
downloadUrl("https://storage.googleapis.com/mapsdevsite/json/mapmarkers2.xml", function(data) {
var bounds = new google.maps.LatLngBounds();
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName('marker');
for (var i = 0; i < markers.length; i++) {
var id = markers[i].getAttribute('id');
var address = markers[i].getAttribute('address');
var type = markers[i].getAttribute('type');
var latlng = new google.maps.LatLng(parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
bounds.extend(latlng);
var marker = createMarker(id, markers[i].getAttribute("name"), address, latlng, type);
}//finish loop
//map.fitBounds(bounds);
}); //end downloadurl
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
}
function createMarker(id, name, address, latlng, type) {
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(marker, "click", function() {
if (infowindow) infowindow.close();
infowindow = new google.maps.InfoWindow({content: name});
infowindow.open(map, marker);
});
return marker;
}
JSFiddle
i am calling initialize function on parks tag class then club tag class then map reload again i want to stop map reload and print parks when click on parks class and print clubs when click clubs class.the same functionality works on some other types.
function initialize(lat, lon, typ) {
var pyrmont = new google.maps.LatLng(lat,lon);
map = new google.maps.Map(document.getElementById('map'), {
center: pyrmont,
zoom: 15
});
//var latlng = new google.maps.LatLng(-24.397, 140.644);
var request = {
location: pyrmont,
radius: 400,
types: [typ]
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
var myCity = new google.maps.Circle({
center: pyrmont,
radius: 500,
strokeColor: "#0000FF",
strokeOpacity: 0.8,
strokeWeight: 1,
fillColor: "#0000FF",
fillOpacity: 0.1,
editable: true
});
myCity.setMap(map);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon:'icone/'+typ+'.png',
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}
You won't want to run your initialize function again, because it will try to create another map.
To find the new set of places, you simply need to change your request array and call the nearbySearch function again. Here is the order of things you need to do when the user changes the 'Type'.
Request array is changed to have the new type (request = {......})
searchNearby function is called again to pull in the new Places
In the callback function, clear the markers from the old 'Type' off of the map
To do all of this, you should make your map a global variable so that you can reference it from any function. Similarly, you should store your Markers in a global array so that you can loop through it to easily remove them when a new type is selected.
I know this has been covered a lot before and its a simple tweak to make it work but that's making it all the more frustrating.
I'm new to Google Maps API V3 and Javascript as a whole. I've managed to make a map with markers on but I'm wanting to implement the marker clusterer feature.
My code is as follows:
<script type="text/javascript">
var markers = [
['Wathegar', 58.443420, -3.247061, '/Projects/Wathegar/', '/images/MapsIcons/operational.png'],
['Wathegar 2', 58.436726, -3.216505, '/Projects/Wathegar_2/', '/images/MapsIcons/consented.png'],
['Sibmister', 58.570869, -3.429623, '/Projects/Sibmister/', '/images/MapsIcons/planning.png'],
['Humbleburn', 54.851982, -1.651425, '/Projects/Humbleburn/', '/images/MapsIcons/planning.png'],
['Achlachan', 58.449348, -3.452797, '/Projects/Achlachan/', '/images/MapsIcons/pre-planning.png'],
['Bonwick', 53.955025, -0.227451, '/Projects/Bonwick/', '/images/MapsIcons/pre-planning.png'],
['Garton', 54.033081, -0.494127, '/Projects/Garton/', '/images/MapsIcons/pre-planning.png'],
['Hill of Lybster', 58.603081, -3.679004, '/Projects/Hill-of-Lybster/', '/images/MapsIcons/planning.png'],
['Moota', 54.710442, -3.331947, '/Projects/Moota/', '/images/MapsIcons/pre-planning.png'],
['Sherburn Stone', 54.770432, -1.4593797, '/Projects/Sherburn-Stone/', '/images/MapsIcons/pre-planning.png'],
['Spring Brook', 53.498360, -1.624646, '/Projects/Spring_Brook/', '/images/MapsIcons/pre-planning.png'],
['Sunnyside', 55.387691, -3.949585, '/Projects/Sunnyside/', '/images/MapsIcons/pre-planning.png'],
['Thacksons Well', 52.955578, -0.759824, '/Projects/Thacksons_Well/', '/images/MapsIcons/pre-planning.png'],
];
function initializeMaps() {
var latlng = new google.maps.LatLng( 56.2, -2,5);
var myOptions = {
zoom: 6,
center:latlng,
mapTypeId: google.maps.MapTypeId.HYBRID,
mapTypeControl: false,
panControl: false,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
streetViewControl: false,
};
var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
var infowindow = new google.maps.InfoWindow(), marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
}
}
</script>
I've tried rebuilding it in the format used in this example along with a few other blogs but I don't have a good enough understanding of JS to know what I need to do.
Any help would be greatly appreciated.
Thanks!
The format of the JSON is OK, it doesn't have any effect to the MarkerClusterer.
What you are missing is to create a instance of the MarkerClusterer and to add the markers to this instance:
var mc = new MarkerClusterer(map),//MarkerClusterer-instance
marker, i;
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
mc.addMarker(marker);//add the marker to the MarkerClusterer
}
Please note: the linked page uses the MarkerClusterer for Maps-API-V2, for V3 use this updated Version:
http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer_compiled.js
You can also push all markers at single go to MarkerClusterer
var marker, i;
var markersArray = [];
for (i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i][1], markers[i][2]),
map: map,
url:markers[i][3],
icon:markers[i][4]
});
google.maps.event.addListener(marker, 'click', function() {
window.location.href = this.url;
});
markersArray.push(marker);
}
var mc = new MarkerClusterer(map,markersArray),//MarkerClusterer-instance which add all markers to the MarkerClusterer
I have an application where I'm using the Google Map API to display markers for posts made by users using their lat/lon. I employed the MarkerClusterer capability for better organization of the markers, which works but with a bug of sorts.
Essentially, I've been testing this at home so the lat/lon has been the same for all test posts. Before using MarkerClusterer, zooming far into the map would eventually reveal all the markers. Unfortunately, using the MarkerClusterer, if there is, for example, a "5" listed for the number of markers that are very close together such as these test posts, clicking on the cluster reveals nothing. No markers ever appear when these are very close together. To reiterate, these markers do appear without the MarkerClusterer.
I upgraded to MarkerClustererPlus v2.0.9 per another post that described other issues with the MarkerClusterer but that hasn't solved the problem.
Any insight into this issue would be greatly appreciated.
Edit: geocodezip suggested the overlappingmarkerspidifier, which sounds great, but my code is fairly involved and I'm not sure how to incorporate it. Any insight much appreciated. Code follows:
function mainGeo()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
}
else
{
alert("Sorry, but it looks like your browser does not support geolocation.");
}
}
var stories = {{storyJson|safe}};
var geocoder;
var map;
var markers = [];
function loadMarkers(stories){
for (i=0;i<stories.length;i++) {
var story = stories[i];
if (story.copy.length > 120) {
story.copy = story.copy.substring(0, 120) + "...";
}
(function(story) {
var pinColor = "69f2ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var point = new google.maps.LatLng(story.latitude, story.longitude);
var marker = new google.maps.Marker({position: point, map: map, icon: pinImage});
var infowindow = new google.maps.InfoWindow({
content: '<div >'+
'<div >'+
'</div>'+
'<h2 class="firstHeading">'+story.headline+'</h2>'+
'<div>'+
'<span>'+story.author+'</span><br />'+
'<span>'+story.city+'</span><br />'+
'<span>'+story.topic+'</span><br />'+
'<p>'+story.date+'</p>'+
'<p>'+story.copy+'</p>'+
'<p><a href='+story.url+'>Click to read story</a></p>'+
'</div>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
markers.push(marker);
})(story);
}
}
function mainMap(position)
{
geocoder = new google.maps.Geocoder();
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var width = window.innerWidth - 80;
size = width;
// Prepare the map options
var mapOptions =
{
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
loadMarkers(stories);
var markerCluster = new MarkerClusterer(map, markers);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function error() {
alert("You have refused to display your location. You will not be able to submit stories.");
}
mainGeo();
Perhaps this post in the v3 group: Overlapping markers on your Google Map? Meet OverlappingMarkerSpiderfier might help:
Sounds like the OverlapingMarkerSpiderifier solves your problem.
I'm currently working on an application where various markers are placed with infowindows on a Google Map based on a user's posts. I've also included geocoding so that the user can change their location and view markers/posts in any area.
What I'd like to do is for the user to search through the text info in the infowindows via a form and the map then responds by showing the markers that contain that text window. I've searched through the API and I don't see this ability mentioned, although it seems like it should be achievable.
Any insight or information on how to accomplish this would be much appreciated.
Here's the current code within the application:
function mainGeo()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition( mainMap, error, {maximumAge: 30000, timeout: 10000, enableHighAccuracy: true} );
}
else
{
alert("Sorry, but it looks like your browser does not support geolocation.");
}
}
var stories = {{storyJson|safe}};
var geocoder;
var map;
function loadMarkers(stories){
for (i=0;i<stories.length;i++) {
var story = stories[i];
(function(story) {
var pinColor = "69f2ff";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=S|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var point = new google.maps.LatLng(story.latitude, story.longitude);
var marker = new google.maps.Marker({position: point, map: map, icon: pinImage});
var infowindow = new google.maps.InfoWindow({
content: '<div >'+
'<div >'+
'</div>'+
'<h2 class="firstHeading">'+story.headline+'</h2>'+
'<div>'+
'<p>'+story.author+'</p>'+
'<p>'+story.city+'</p>'+
'<p>'+story.topic+'</p>'+
'<p>'+story.date+'</p>'+
'<p>'+story.copy+'</p>'+
'<p><a href='+story.url+'>Click to read story</a></p>'+
'</div>'+
'</div>'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,this);
});
})(story);
}
}
function mainMap(position)
{
geocoder = new google.maps.Geocoder();
// Define the coordinates as a Google Maps LatLng Object
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Prepare the map options
var mapOptions =
{
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Create the map, and place it in the map_canvas div
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
// Place the initial marker
var marker = new google.maps.Marker({
position: coords,
map: map,
title: "Your current location!"
});
loadMarkers(stories);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
function error() {
alert("You have refused to display your location. You will not be able to submit stories.");
}
mainGeo();
Create three empty arrays (e.g., markers, infowindows, and matches)
As you instantiate the marker, reference the marker via an index in the markers array (e.g., markers[i] = marker)
As you instantiate the infowindow, reference it's content via an index in the infowindows array (e.g., infowindows[i] = htmltext [or whatever variable name you store your content in)
Search for the string in the infowindows array, store the indexes of the items that contain the string in the matches array, and then use a for loop with the matches array to add the markers from the markers array (based on the index values of the matches array).