I am relatively new to web development. I am trying to extract a physical location from the longitude and latitude using google map (i think google.map would be right for this). I have already written this code in JADE which gives me lat and long. How can i use this value to see the exact physical location. Thanks !
if (navigator.geolocation) {
console.log('Geolocation is supported!');
var startPos;
navigator.geolocation.getCurrentPosition(function(position) {
startPos = position;
jQuery("#location_latitude").append(startPos.coords.latitude);
jQuery("#location_longitude").append(startPos.coords.longitude);
console.log(startPos.coords.latitude);
console.log(startPos.coords.longitude);
});
}
A am sure you will find solution looking in the source:
http://html5demos.com/geo
You have to create the map and then locate a marker on it.
Related
I am using the static image API (where you pass a URL to Google and it returns an image). My issue is the images google is returning are sometimes not straight-on/clear view of the address. I am looking to get the same image as what the Google Maps search feature comes up with as a thumbnail.
I have read the Google Documentation for this API. An example URL is: https://maps.googleapis.com/maps/api/streetview?parameters&size=640x640&fov=50&location=4113+Hartford+Dr+Garland+TX
If I put this same address (4113 Hartford Dr, Garland, TX) directly into Google Maps, I get a much cleaner image.
I have experimented with changing the FOV value. My only other idea is to use heading, but I am unsure about this.
The end implementation is in Excel using VBA.
Let me know if you need any additional information.
You are going to have to compute the heading. I don't have the raw math for that, but here is an example using the JS API, if that's an option.
function getStreetView(lat, lng) {
let panorama = new google.maps.StreetViewPanorama(
document.getElementById('panorama'), {
position: {lat: lat, lng: lng}
})
let service = new google.maps.StreetViewService
service.getPanoramaByLocation(panorama.getPosition(), 50, function(panoData) {
if (panoData) {
let panoCenter = panoData.location.latLng
let heading = google.maps.geometry.spherical.computeHeading(panoCenter, {lat: lat, lng: lng})
let pov = panorama.getPov()
pov.heading = heading
panorama.setPov(pov)
} else {
alert('no streetview found')
}
})
map.setStreetView(panorama) // set dude on map
}
I wonder, is it possible to connect a db to google maps api to render polygons, points etc?
If a store all kml coordinates connected to polygons, will it be possible to render it fra database or do i need to create a kml file to visualize it?
Is there any example?
Thanks!
A KML file is not required to visualize points, polygons, etc using Google Maps API. However, the KML layer is a useful way to represent complex geospatial features.
A backend database with HTTP access could return a list of map coordinates that your client code can render into appropriate shapes using Google Maps API.
The Google Maps API provides examples to create various shapes.
Example to create simple point marker:
https://developers.google.com/maps/documentation/javascript/examples/marker-simple
Example to create simple polygon:
https://developers.google.com/maps/documentation/javascript/examples/polygon-simple
The client code will need to query the data from the database such as from a servlet with access to the database. Database will most likely be running on a different port or from a different server so javascript won't be able to access it directly.
Your server-side component could query a database and return formatted KML or it could return a JSON result that your client code would render. Depends on whether you want to write more backend server code or JavaScript code on the client.
hmmm... I am using another solution now (data from DB to show on Google earth which is default application for KML file) and hope this help :
( may refer to https://sites.google.com/site/canadadennischen888/home/kml/auto-refresh-3d-tracking )(plus, in my other page, there is sample java code)
Details as :
prepare a RestFul service to generate KML file from DB (KML sample as inside above link)
My other jsp code will generate a KMZ file which has a link to my Restful service. KMZ file has onInterval ( as in the bottom)
Jsp web page allow user to download KMZ file.
When Google Earth open KMZ file, Google Earth will auto refresh to get new data from that Restful service
Everytime refreshing, server will send the latest update KML data with new data to GE.
KMZ sample:
<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2"
xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<NetworkLink>
<name>Dennis_Chen_Canada#Hotmail.com</name>
<open>1</open>
<Link>
<href>http://localhost:9080/google-earth-project/rest/kml/10001/20002</href>
<refreshMode>onInterval</refreshMode>
</Link>
</NetworkLink>
</kml>
result as :
Thanks for you're answer. I don't know if i get somewhat wiser of this, but at least i know that it is possible.
I have used Shape2Sql to save the coordinates in the database.
But as i understand, i need someway to convert this to geojson before it can render in Google maps? if i understand correct?
As i understand to render geojson is mostly the same as to render kml when it comes to files. But i don't know how to Connect to a database.
I make a list from database:
var adresses = _unitOfWork.GeoAddressRepository.Get(q => q.GeoRouteNorpost.Code == "3007106", includeProperties: "GeoRouteNorpost").ToList();
var points = new List<LatLong>();
foreach (var address in adresses)
{
points.Add(new LatLng() { Lat = "59.948261", Lng = "10.750699" });
points.Add(new LatLng() { Lat = "59.943128", Lng = "10.755814" });
points.Add(new LatLng() { Lat = "59.941245", Lng = "10.746084" });
points.Add(new LatLng() { Lat = "59.943527", Lng = "10.742786" });
points.Add(new LatLng() { Lat = "59.946824", Lng = "10.744435" });
points.Add(new LatLng() { Lat = "59.946813", Lng = "10.744446" });
points.Add(new LatLng() { Lat = "59.947107", Lng = "10.748241" });
points.Add(new LatLng() { Lat = "59.947827", Lng = "10.749525" });
points.Add(new LatLng() { Lat = "59.948248", Lng = "10.750699" });
}
This example show a polygon on a map. But i'm not sure how to get this coordinates out of the database and how to solve it when it is serveral polygons.
As i have written, i have saved the coordinates in the db With shape2Sql. So now i have a Field for geometry. If i look at the spatial result in sql server this looks correct. But how can i display this in Google maps?
I am grateful for all help:)
Google Maps on windows phone
How can I add pushpins and get directions in here.
Do I require to use JavaScript
Note in this method:
function addMarkers () {
for (var i = 0; i < dataResults.features.length; i++) {
var quake = dataResults.features[i];
var coors = quake.geometry.coordinates;
var latLong = new google.maps.LatLng(coors[1], coors[0]);
var marker = new google.maps.Marker({
position: latLong,
map: map
//icon: getCircle(earthquake.properties.mag)
});
}
}
The important part in that is when we create a marker we give it a map object, which was initialized from the div 'mapdisplay' so we initialize that map object here
function initialize() {
map = new google.maps.Map(document.getElementById('mapdisplay'), {
zoom: 3,
...
and in turn it is passed as the 'map' parameter in the call to:
new google.maps.Marker
This is using the returned earthquake data from the USGS and simply creating the new marker.
You can simply use a similar technique to add your own pins (ie markers), and yes - you need JavaScript : )
https://developers.google.com/maps/documentation/javascript/overlays
In order to get directions see "Displaying the DirectionsResult" at https://developers.google.com/maps/documentation/javascript/directions
or an overview at
https://developers.google.com/maps/documentation/directions/
For a working sample (it's not win8 but it shouldn't matter as I'm assuming you are using a Windows 8 HTML/JS application)
Get directions in new window Google maps API v3
Now with that said - you can also use Bing Maps as well and it's quite documented for Windows 8 applications
Bing Maps for Windows Store Apps
Bing Maps SDK for Windows Store apps Samples
I am starting with google maps. just learning. while ago, it was working. now it's not. everything seems to work in UI Controls, Markers/Overlay but the map is blank.
google.load("jquery", "1.3.2");
google.load("maps", "2");
google.setOnLoadCallback(function() {
var map = new google.maps.Map2(document.getElementById("map"));
map.setCenter(new google.maps.LatLng(103.8, 1.37), 13);
map.setUIToDefault();
map.addOverlay(new google.maps.Marker(new google.maps.LatLng(103.8, 1.37)));
});
The point you are trying to centre the map onto isn't a valid Lat/Lon pair: Latitude runs from +/-90 degrees: you're passing in +103.8
seems like you've got your parameters the wrong way around (Lat +1.37, Lon +103.8 puts you in Malaysia)
I want to create a Google map with user uploaded Geotagged photos that show up on my map. I can easily create manipulate my map but I can't seem to find instruction on how to add these geotagged photos.
Here is an example of what I am try to accomplish:
http://maps.google.com/?ie=UTF8&ll=26.892794,-80.055909&spn=0.003875,0.004828&t=h&z=18&lci=lmc:panoramio
I don't have experience working with photos, but I don't think it should be really any different than placing a GMarker on the map at the appropriate coordinates of your photo, and then in the info window of the tag you would output your custom HTML which would include your photo.
Edit: Specific link leading to the GMarker class in the Google Maps API Reference: http://code.google.com/apis/maps/documentation/reference.html#GMarker
You need to create a tile, then create a tile overlay.
var tilelayer = new GTileLayer(myCopyright);
tilelayer.getTileUrl = function() { return "../include/tile_crosshairs.png"; };
tilelayer.isPng = function() { return true;};
tilelayer.getOpacity = function() { return 1.0; }
var myTileLayer = new GTileLayerOverlay(tilelayer);
var map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(new GLatLng(37.4419, -122.1419), 13);
map.addOverlay(myTileLayer);
The documentation is here, with a great sample map here.
You could use PHP (or another script) to create a KML or GeoRSS file (much like Flickr's KML and GeoRSS feeds) and have the Google Maps API function GGeoXML load the file as an overlay on the map.
See Google's example code here: http://code.google.com/apis/maps/documentation/examples/geoxml-rss.html
That example is actually loading a live GeoRSS feed from Flickr.