This is the code i'm using in my page to display maps with pointers database as latitude and longitude.
This Code displays the normal image as represented in the google maps, But as i need the grayscale map, itried it with the google api and got the JSON code but im worried, how to use up the json code that the map displays in Greyscale.
This is the script present in my page:- below this is the JSON code from Google maps
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAfJRXkzFVohAp-Okxjr5B7xR_ljEFASla9K2hAbTooXc5TaM12hShF8opt9JtUXJpFbuViIHs05-CNg" type="text/javascript">
</script>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function(){
if (GBrowserIsCompatible()) {
var latitude = <?php echo $store_details->latitude; ?>;
var longitude = <?php echo $store_details->longitude; ?>;
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(latitude,longitude),13);
var marker = new GMarker(new GLatLng(latitude,longitude));
map.addOverlay(marker);
}
});
//]]>
</script>
This is the JSON code:
[ { stylers: [ { saturation: -100 }, { visibility: "on" } ] } ]
You are using Version 2 of the API, which does not have styled maps. You need to use Version 3 to make that functionality available. Version 3 is quite different from Version 2. New projects should definitely use Version 3, and Version 2 projects will stop working in May 2013.
Greyscale map adapted from Google's rather garish example:
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Styled MapTypes</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
var map;
var brooklyn = new google.maps.LatLng(40.6743890, -73.9455);
var MY_MAPTYPE_ID = 'Greyscale';
function initialize() {
var graystyle = [
{
featureType: "all",
elementType: "all",
stylers: [ { saturation: -100 }, { visibility: "on" } ]
}
];
var mapOptions = {
zoom: 12,
center: brooklyn,
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
var styledMapOptions = {
name: "Greyscale"
};
var grayMapType = new google.maps.StyledMapType(graystyle, styledMapOptions);
map.mapTypes.set(MY_MAPTYPE_ID, grayMapType);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 640px; height: 480px;"></div>
</body>
</html>
Related
So I've been trying to practice the leaflet library, and I implemented a system that lets me make polygons on the map, and save them in a table in a MySQL database like GeoJSON, but now I want to take all the polygons I've made and show them in the map, but I don't know-how.
this is the code of a PHP file that shows the map, and I want to add the polygons I've made so far to visualize them on the map.
<!DOCTYPE html>
<html>
<head>
<script src="leaflet-src.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<link rel="stylesheet" href="leaflet.css"/>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div id="map" style="width: 100hw; height: 90vh; border: 1px solid #ccc"></div>
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
map = new L.Map('map', { center: new L.LatLng(4.639386, -74.082412), zoom: 6 }),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map),
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s#189&gl=cn&x={x}&y={y}&z={z}', {
attribution: 'google'
})
}, { 'Pedidos': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
</script>
</body>
</html>
So I don't really know how or where to start, the table has two columns, one named 'geojson' in which it's located the GeoJSON, and the other one has an id, I'm a noob but I've been trying to do it, so if someone can give me a hint, I would appreciate.
UPDATE
I solve it, I add this to the PHP file into the script.
<script>
var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© OpenStreetMap contributors',
osm = L.tileLayer(osmUrl, { maxZoom: 18, attribution: osmAttrib }),
map = new L.Map('map', { center: new L.LatLng(4.639386, -74.082412), zoom: 6 }),
drawnItems = L.featureGroup().addTo(map);
L.control.layers({
'osm': osm.addTo(map),
"google": L.tileLayer('http://www.google.cn/maps/vt?lyrs=s#189&gl=cn&x={x}&y={y}&z={z}', {
attribution: 'google'
})
}, { 'Pedidos': drawnItems }, { position: 'topleft', collapsed: false }).addTo(map);
<?php
$sql="SELECT geojson FROM poligono WHERE ent = '$entidad'";
$dat = mysqli_query($conn, $sql);
while($consulta = mysqli_fetch_array($dat))
{
$poligono = $consulta['geojson'];
?>L.geoJSON(<?php echo $poligono;?>).addTo(map);<?php
}
?></script>
you have to add this after you add the map to your page like is shown above.
<?php
$sql="SELECT geojson FROM poligono WHERE ent ='$entidad'";
$dat = mysqli_query($conn, $sql);
while($consulta = mysqli_fetch_array($dat))
{
$poligono = $consulta['geojson'];
?>L.geoJSON(<?php echo $poligono;?>).addTo(map);<?php
}
?>
remember to change "$sql" to the direction in which is located your geojson, and to put in "$consulta['geojson']" instead of 'geojson' the name of the column in which is located the GeoJSON.
I am following a tutorial that can locate a friend (their mobile) and pinpoint them on a Google map. All was going well including getting my coordinates and printing them to screen and putting them inside my <div id="location"></div> but now I am trying to take those coords and mark them on a map but I cant get the map to show. I'm sure my functions are set up wrong somehow but I can't work it out. Any clues?
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="scripts/jquery.ui.map.js"></script>
<script>
$(document).ready(function(){
navigator.geolocation.getCurrentPosition(useposition);
});
</script>
<script>
function useposition(position){
lat = position.coords.latitude;
lon = position.coords.longitude;
$("#location").html('Lat: ' + lat + '<br />Lon: ' + lon);
};
function deviceposition(position){
$("#map").gmap({'center': deviceposition, 'zoom': 12, 'disableDefaultUI': true, 'mapTypeId': 'terrain'}).bind('init', function(ev, map) { themap = map;});
$('#map').gmap('addMarker', { 'id': 'client', 'position': deviceposition, 'bounds': true
});
}
</script>
</head>
<body>
<div id="location"></div>
<div id="map" style="width:400px; height:400px"></div>
<!-- This is supposed to be filled with the Google Map coords -->
</body>
</html>
I have tried passing div in CreateElement() method and then assigning the values to a variable mapcanvas. This whole declaration is inside a method which is called in this particular line:
navigator.geolocation.getCurrentPosition(success);
I am sharing the whole code..
<script>
function success(position) {
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcontainer';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '600px';
document.querySelector('article').appendChild(mapcanvas);
var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var options = {
zoom: 15,
center: coords,
mapTypeControl: false,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
},
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("mapcontainer"), options);
var marker = new google.maps.Marker({
position: coords,
map: map,
title:"You are here!"
});
}
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success);
} else {
error('Geo Location is not supported');
}
</script>
Hope this would help!!!
I am using the the Google Maps JavaScript API v3. I have a map that has markers on each state. When I click the state marker, I need access to the state abbreviation in the callback function. Is there any way native to google maps that I can access the state of a marker?
google.maps.event.addListener(mark,'click',function(event){
// how can I access the state abbreviation (e.g. 'MO') from in here?
}
I know that I can probably accomplish this via reverse geocoding, but is there any simpler (and less error-prone) way?
If this can only be accomplished using reverse geocoding, what is the simplest code to access the state? I assume my code would look something like this:
google.maps.event.addListener(mark,'click',function(event){
geocoder.geocode({'latLng': event.latLng}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
... get state from results ...
}
}
}
What would be the simplest code to get the state from the results? Based on the documentation of the address component types, I assume I would be looking for the "short_name" of the "administrative_area_level_1". Is this correct? Is there an easier way to access it than looping over the results until I find the "administrative_area_level_1"? (I have jquery included on the page and so can code with it if it makes anything simpler)
Here's a working example:
<!DOCTYPE html>
<html>
<head>
<title>http://stackoverflow.com/questions/17144375/how-to-get-the-state-of-a-marker?noredirect=1#comment24816710_17144375</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100%; width:100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
var markers = [
{lat:54.60039, lng:-3.13632, state:"AA"},
{lat:54.36897, lng:-3.07561, state:"ZZ"},
];
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(54.42838,-2.9623),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker;
var infowindow = new google.maps.InfoWindow({
content: ''
});
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
for (var i = 0; i < markers.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(markers[i].lat,markers[i].lng),
map: map,
title:"marker " + i,
state: markers[i].state // a custom property of our own
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(this.state);
infowindow.open(map, this);
});
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
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.
How to display google earth (KML) file using javascript.
thanks
I'll assume you want to view the KML-file in a browser preferably Mozilla Firefox. Firstly, I want to give some simple JavaScript that we will use in OpenLayers. You should try them since it also using JavaScript library.
Here I briefly show you how the codes are written.
<html>
<head>
<title>Google Layer with KML file</title>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<script src='http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
var map;
function init() {
// Create the map object
map = new OpenLayers.Map('map');
// Create a Google layer
var gmap = new OpenLayers.Layer.Google(
"Google Streets", // the default
{numZoomLevels: 20}
);
// Add layer to map
map.addLayer(gmap);
//Adding KML file to map
map.addLayer(new OpenLayers.Layer.GML("KML", "kompleks_antarabangsa.kml",
{
format: OpenLayers.Format.KML,
formatOptions: {
extractStyles: true,
extractAttributes: true,
maxDepth: 2
}
}));
// Zoom to Kuala Lumpur, Malaysia
map.setCenter(new OpenLayers.LonLat(101.686855,3.139003), 13);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Google Layer with KML file</h1>
<div id="map" style='width: 700px; height: 700px'></div>
</body>
</html>
As you can see, there is a small orange dot on the map. That is the KML file loaded on Google Maps.
Try and run the HTML codes using any software. But, I suggest you to use Notepad ++. Last but not least, I hope my answer isn't too late for you, Kyathi.
//do axis call to the data url
// parse the records to get the point and additional data
//plot like this
var features_1 = new Array(records.length -1);
for (var i = 1; i < records.length; i++) {
var coordinates = transform([ records[i][9], records[i][8]], 'EPSG:4326', 'EPSG:3857');
features_1[i-1] = new Feature( {
geometry: new Point(coordinates ),
name: records[i][6],
Magnitude: dat[i][dat[0].length -1],
size : dat[i][dat[0].length -1]
}) ;
}
var source = new VectorSource({
features: features_1
});
var clusterSource = new Cluster({
distance: 30,
source: source
});
vector = new VectorLayer({
source: clusterSource,
style: styleFunction
});
var raster = new TileLayer({
source: new Stamen({
layer: 'toner'
})
});
var map = new Map({
layers: [raster, vector],
interactions: defaultInteractions().extend([new Select({
condition: function(evt) {
return evt.type == 'pointermove' ||
evt.type == 'singleclick';
},
style: selectStyleFunction
})]),
target: 'map',
view: new View({
center: [0, 0],
zoom: 2
})
});
//