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.
Related
I have a question about the googleMaps Javascript API. Is it possible to create a custom Layer that you can show/hide like the given layers such as traffic and bicycle layer?
I would like to have a own Layer for my Markers and another Layer for polygons.
thanks in advance
I understood of your question that you would like to create a custom layer on your web site. You also need to change the layer informations at any time.
Google maps api provides KML and GeoRSS data formats for "displaying geographic information".
We are going to introduce KML format.
You may create a KML file witch provides the informations for your layer. You can find an example of KML file here. Of course, you can edit this file any time on your server.
This is an example of editing a file on php:
$file = file_get_contents($_SERVER['DOCUMENT_ROOT']."/yourKLMFile.txt");
$file= str_replace("OldValue", "NewValue", $file);
echo ($file);
You also can provide personal data for your users or simply update your layer.
Next, JS.
Google maps api provides the KmlLayer() constructor witch creates your layers and display it on the map (since you have created it).
The constructor takes two important parameters:
The URL of your KML file (probably on your server);
The map in witch you want to display the layer.
This is a sample example:
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
This is a sample code spinnet wich resume all this:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 11,
center: {lat: 41.876, lng: -87.624}
});
var ctaLayer = new google.maps.KmlLayer({
url: 'http://googlemaps.github.io/js-v2-samples/ggeoxml/cta.kml',
map: map
});
}
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<script async defer
src="https://maps.googleapis.com/maps/api/js?callback=initMap">
</script>
Remember that you can always update your data file in php.
You may consult the documentation about KML layer and generally google maps' layers on google maps web site.
Tell me a comment if you have some questions
I want to create symbols with text on google maps as shown in the following map where roads are marked with their names e.g. M1.
google maps example
Also the text is not predefined so I cannot use stored icons with the appropriate text.
Any ideas on how google creates these symbols?
A good idea here is to write a server side process in your backend's language to render this dynamic image.
For PHP there is: PHP GD
Perl(My Current backend) has a number of module for drawing images.
I'm sure whatever your backend is it has some.
Anyway you can write some code that given some GET variables will return an image drawn using them.
Then you just need a small function to build the url:
function getImage(text,color) {
return "example.com/draw/icon.php?text="+text+"&color="+color;
}
This will call your serverside file which can return the image with the correct headers.
You'll need to employ some form of caching to generate these probably on the server side and the client side depending on your apps load.
So you want to add place names? You can create custom icons or labels, are you using the API or My Maps?
This may help if you're using My Maps:
https://support.google.com/mymaps/answer/3024931?hl=en
otherwise if you're using the API then try this:
var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';
var icons = {
parking: {
icon: iconBase + 'parking_lot_maps.png'
},
library: {
icon: iconBase + 'library_maps.png'
},
info: {
icon: iconBase + 'info-i_maps.png'
}
};
function addMarker(feature) {
var marker = new google.maps.Marker({
position: feature.position,
icon: icons[feature.type].icon,
map: map
});
}
https://developers.google.com/maps/tutorials/customizing/custom-markers
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 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.
I have a huge set of placemarks loaded using regionated kml files. (around 1000 kml files generated).
For example , I have a button, when clicked camera flies to the location of the placemark I want to access. So I think the kml file that includes this placemark is loaded after this process. Let's say this is 5.kml and I tried to get the placemark object using getElementByUrl method. But this didn't work. I can also use ge.getElementsByType("KmlPlacemark") method but I need to have a loop to get the placemark object I need. This works but I couldn't find a way to make it work fast. Below is my code
google.earth.addEventListener(ge.getView(), 'viewchangeend', function() {
// after button click and camera centered on the placemark with id 1767
var p = ge.getElementByUrl('http://localhost/Test/5.kml#1767');
alert(p.getId()); // this does not work because p is null
var placemarks = ge.getElementsByType('KmlPlacemark');
for (var i = 0; i < placemarks.getLength(); ++i) {
var placemark = placemarks.item(i);
if(placemark.getId() == 1767)
{
alert(placemark.getId()); // this works
return;
}
}
});
function button_click()
{
var camera = ge.getView().copyAsCamera(ge.ALTITUDE_RELATIVE_TO_GROUND);
camera.setLatitude(30);
camera.setLongitude(50);
camera.setAltitude(2000);
ge.getView().setAbstractView(camera);
}
I wish I found a way to access the object which is imported from KML(when region beomes active). Waiting for your answers. Thanks.
NetworkLink's don't load files into the DOM, which is why getElementByUrl doesn't find the Placemark you're looking for. You would need to fetch the KML. This article should be helpful in explaining the different ways to load KML in the Google Earth API.