Can anyone say how to retrieve a satellite image of an area specified, in the form of an image ?
I prefer java code.
I have tried the following code in javascript. But it's not responding.
<html>
<head>
<title>Google Maps API - Map Type</title>
<style type="text/css">
div #map {
width: 100%;
height: 1000px;
}
</style>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function loadGoogleMap() {
var latlng = new google.maps.LatLng(8.70386, 77.11423);
var mapOptions = {
zoom : 13,
center : latlng,
mapTypeId : google.maps.MapTypeId.SATELLITE,
mapTypeControlOptions : {
style : google.maps.MapTypeControlStyle.DROPDOWN_MENU,
position : google.maps.ControlPosition.TOP_CENTER
}
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);
var marker = new google.maps.Marker( {
position : latlng,
map : map,
title : ""
});
}
</script>
</head>
<body onload="loadGoogleMap()">
<div id="map"></div>
</body>
Use the following java code:-
String temp;
Image image = null;
temp="http://maps.googleapis.com/maps/api/staticmap?center="+latitude+","+longitude+"& zoom=18&size=100x100&sensor=false&maptype=satellite";
URL url = new URL(temp);
image = ImageIO.read(url);
ImageIO.write((RenderedImage) image, "jpg",new File("D:\\map.jpg"));
// give the latitude and the longitude as 25.165173,47.237548
And run the code you will the image of an area in Saudi Arabia.
Related
I tried the tutorial from this place.
When I get at the heatmap part it doesn't draw the map anymore.
I guess I must be doing something wrong but I have no clue...
The moment I remove the comments from icon: image part I'll get a map drawn,
but the heatmap part isn't working.
I hope that somebody can help me
Kind Regards
Guy
// Reference to the Firebase database.
var firebase = new Firebase("https://adopt-a-portal.firebaseio.com/");
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3
});
// Add marker on user click
map.addListener('click', function(e) {
firebase.push({lat: e.latLng.lat(), lng: e.latLng.lng()});
});
// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
data: [],
map: map,
radius: 8
});
firebase.on("child_added", function(snapshot, prevChildKey) {
// Get latitude and longitude from Firebase.
var newPosition = snapshot.val();
// Create a google.maps.LatLng object for the position of the marker.
// A LatLng object literal (as above) could be used, but the heatmap
// in the next step requires a google.maps.LatLng object.
var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng);
// Place a marker at that location.
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: latLng,
map: map
// icon: image
});
heatmap.getData().push(latLng);
});
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
<script src="map.js"> </script>
</body>
</html>
I get a javascript error with your code: Uncaught TypeError: Cannot read property 'HeatmapLayer' of undefined
You aren't including the visualization library.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
Should be (note the added "libraries=visualization"):
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
proof of concept fiddle
I have a component called foo
I have foo.html in apps/foo/components/content/foo/foo.html
currently this file contains the following.
<div data-sly-use.ev="Foo"
class="${ev.cssClass || ''}"
title="${ev.title || ''}"
data-emptytext="Foo Asset">
${ev.html # context='unsafe'}</div>
I have Foo.java in apps/foo/components/content/foo/Foo.java
that has getCssClass(), getTitle(), getHtml() needed by foo.html.
The above works fine
Question
When the user adds this component to the page, I want it to include a google map in the page. The lat/long to the google map will be provided by Foo.java#getLat() and Foo.java#getLong()
How can I do this?
I have the google map working in an HTML outside of AEM and the code is pretty simple:
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 500px;
height: 400px;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map-canvas');
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
center: myLatlng,
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Hello World!'
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
the lat/long values for myLatlng variable in the above javascript will need to come from Foo.java.
If you want to pass parameters to a script you can do as they generally do in Coral UI via data-xxx attributes in the Sightly script.
Set the property from your Foo into a data attribute in some DIV you will later fetch in JS.
Get the div in JS via its ID and obtain the data attributes you are interested in.
Example:
Sightly
<div id="map_canvas" data-lat="${ev.lat}" data-long="${ev.long}">
</div>
Javascript
this.mapCanvas = document.getElementsByClassName("map_canvas")[0];
var lat = $mapCanvas.data("lat");
var long = $mapCanvas.data("long");
var myLatlng = new google.maps.LatLng(lat,long);
I hope this helps! :)
I have already pointed my office location in google map.
Also I created API key.
Now i using embeded code to show google map location in my contact page.
I want to replace the same with AP key.
How to show my office location using Google Maps JavaScript API v3.
Following is my test.html page for checking the map. Which parts need to modify to show my location ?
You can see my location in below url
google(dot)com/maps?ll=9.965156,76.290034&z=14&t=m&hl=en-US&gl=US&mapclient=embed&cid=9383043750302267720
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=my key already added here">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: { lat: -9.959238, lng: 76.275271},
zoom: 8
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>
</html>
Sounds like you want to add a marker
Code below is for your initialize function based on the docs but w/ your Lat,Lon and zoom level.
var myLatlng = new google.maps.LatLng(9.965156,76.290034);
var mapOptions = {
zoom: 8,
center: myLatlng
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Hello World"
});
The marker's title (i.e. "Hello World" in the example above) will appear as a tooltip. If you don't want a tooltip, you can remove that line.
I have made some code to plot basic markers on a google map selectable via a dropdown.
however : I'd like to have two drop downs with the same options in them, and only display the markers selected in the dropdown (i.e. have 100+ markers but only show 2). Id also like to 'draw a line' in-between the two points and have a pop up window (as per google maps does) when hovering over the location. Lastly, can the window resize to the markers?
Here's what I've got so far:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
// Here you can specify all list of your geolocation options
window.markers = {
'Moscow': {lat: 55.74257, lng: 37.61547},
'Saint Petersburg': {lat: 59.93952, lng: 30.31202}
};
// This is a initialization of map and set of all markers
function initialize() {
var latlng = new google.maps.LatLng(window.markers['Moscow'].lat, window.markers['Moscow'].lng);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
window.map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for(i in window.markers){
var marker = new google.maps.Marker({
position: new google.maps.LatLng(window.markers[i].lat, window.markers[i].lng),
map: map
});
}
}
// This is a handler for dropdown change
function mychange(element){
var city = new google.maps.LatLng(window.markers[element.value].lat, window.markers[element.value].lng);
map.setCenter(city);
return false;
}
</script>
</head>
<body onload="initialize()">
// This is your dropdown
<select onchange='mychange(this)'>
<option value='Moscow'>Moscow
<option value='Saint Petersburg'>Saint Petersburg
</select>
// This DIV for you map
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
I have published a Google Fusion table/map.
https://www.google.com/fusiontables/DataSource?docid=1bQud-ZGrJK9yBwfdasIcbU1rwJ5W9ZE53RBAeLk
My problem is that the info window does not apear when looking at the map inside html which has the map embedded. As you can see, the table is totally exposed for all users. Before I noticed this problem I had the table shared as "Everyone with the link" and thought that was the issue but no help in changing it to public.
My html with embedded map:
<html>
<head>
<style type="text/css">
#map_canvas {
height: 700px;
width: 380px;
background: #000000;
float:left;
}
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
var layer;
var map;
var html;
function initialize() {
var latlng = new google.maps.LatLng(62.835089,17.556641);
var myOptions = {
zoom: 5,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Add län
var lanLayer = new google.maps.FusionTablesLayer(667529);
lanLayer.setMap(map);
}
function clearOverlays() {
if (layer != null) {
layer.setMap(null);
layer = null;
}
}
function setMapLayer(fusionTableId) {
if (layer != null) {
layer.setMap(null);
layer = null;
}
layer = new google.maps.FusionTablesLayer(fusionTableId);
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()" class="map">
<div id="map_canvas"></div>
<div class="LayerManager">
<form>
<input type="radio" onclick="setMapLayer(3357208)">Antal skuldsatta<br />
<input type="radio" onclick="clearOverlays()" checked="true" >Bara länsgränser<br />
</form>
</div>
</body>
</html>
For the layer that is loaded at init the info window shoes up fine but not the layer that is loaded when radio button is clikced. Why?
Use a proper FusionTablesLayerOptions-object as argument for google.maps.FusionTablesLayer
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Geocodable address',
from: fusionTableId
}
});