How to get neighborhoods and see if they're close to downtown, parks or other places of interest. How we can get for nearby supermarkets, hardware stores, restaurants and other places for a given latitude and longitude.
<!DOCTYPE html>
<html>
<head>
<title>Place searches</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true&libraries=places"></script>
<script type="text/javascript">
var map;
var service;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: '500',
query: 'restaurant'
};
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[i];
createMarker(results[i]);
}
}
}
</script>
</head>
<body onload="initialize()">
<div id="map-canvas" style="width: 50%; float: left">
</div>
</body>
</html>
Related
Can you please help me to implement Skobbler map in ionic based app ?
thanks
by using following code i can draw map.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>
<script src="js/skobbler-2.0.js"></script>
<style>
#map {
height: 500px;
}
</style>
<div id="map"></div>
<script>
function initMap() {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
console.log(pos.lat + "/" +pos.lng);
// alert(pos.lat + "/" +pos.lng);
mytest(pos.lat,pos.lng);
});
}
window.setInterval(function(){
initMap()
}, 1000);
var mymap = '';
var marker = '';
function mytest(lat,long)
{
if(mymap == '' || marker == '')
{
mymap = L.skobbler.map('map', {
apiKey: 'API_KEY',
mapStyle: 'day',
bicycleLanes: true,
onewayArrows: true,
pois: 'all',
primaryLanguage: 'en',
fallbackLanguage: 'en',
mapLabels: 'localNaming',
retinaDisplay: 'auto',
zoomControl: true,
zoomControlPosition: 'top-left',
center: [lat,long],
zoom: 18,
});
marker = L.marker([lat,long]).addTo(mymap);
}
else
{
mymap.center = [lat,long];
marker.remove(marker);
marker = L.marker([lat,long]).addTo(mymap);
}
}
</script>
</head>
<body>
</body>
</html>
I have the following simple code that will display the google street view on a webpage for me.
var panoramaOptions = {
position: myLatlng,
pov: {
heading: 34,
pitch: 10
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
map.setStreetView(panorama);
The only issue I am having that if i'm searching for somewhere like Malta there is no street view available. This is leaving a big ugly blank space on my webpage. Is there a way I can detect if street view is available at a certain location and if it's not stop the map from generating?
Thanks in advance
Yes. Try and get a Street View for your location, and check its status. Here's how I do it:
<!DOCTYPE html>
<html>
<head>
<title>Streetview</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 }
#streetView { height: 100%; width: 100%; }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
function createStreetMap(mapCanvasID, lat, lng)
{
//create a google latLng object
var streetViewLocation = new google.maps.LatLng(lat, lng);
var panorama;
//once the document is loaded, see if google has a streetview image within 50 meters of the given location, and load that panorama
var streetview = new google.maps.StreetViewService();
streetview.getPanoramaByLocation(streetViewLocation, 50, function(data, status) {
if (status == 'OK') {
//google has a streetview image for this location, so attach it to the streetview div
var panoramaOptions = {
pano: data.location.pano,
addressControl: false,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById(mapCanvasID), panoramaOptions);
}
else{
//no google streetview image for this location, so hide the streetview div
$('#' + mapCanvasID).parent().hide();
}
});
return panorama;
}
$(document).ready(function() {
var myPano = createStreetMap('streetView', 0, 0);
});
</script>
</head>
<body>
<div>
<h2>Street View</h2>
<div id="streetView"></div>
</div>
</body>
</html>
I am using Google maps JavaScript API, i get users zip code from database, find lang, lat for it from another table, pass it to JavaScript and show marker on the map.this is showing marker perfectly.
But i want to show marker on exact address of the user instead of just zip code.
But unable to find a way how to do this.
Can anybody please guide me.
Thanks
if you want to place the marker on given lat and lng use this code,
use this code
<!DOCTYPE html>
<html>
<head>
<title>Google Maps</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<style>
html, body, #map-canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
var markersArray=[];
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(11.6667,76.2667),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
function pan() {
deleteOverlays();
var panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.setCenter(panPoint)
var marker = new google.maps.Marker({
map: map,
position: panPoint,
});
markersArray.push(marker);
}
function deleteOverlays() {
if (markersArray) {
for (i in markersArray) {
markersArray[i].setMap(null);
}
markersArray.length = 0;
}
}
</script>
</head>
<body>
Latitude:<input type="text" id="lat" >
Longitude:<input type="text" id="lng">
<input type="button" value="updateCenter" onclick="pan()" />
<div id="map-canvas"></div>
</body>
</html>
I have following codes. It works perfectly in IE (GML and GeoJSON vector layer was loaded), but not in Firefox and Chrome without any errors noticed. Please help me to fix this problem.
Here is the code with GML vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50",
format: new OpenLayers.Format.GML()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>
Here is the code with GeoJSON vector layer (I just used built-in layer in Geoserver, so you can download and test it without any modification):
<!DOCTYPE html>
<html>
<head>
<title>Creating a simple map</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- Include OpenLayers library -->
<script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
</style>
<!-- The magic comes here -->
<script type="text/javascript">
var map;
function init() {
var bounds = new OpenLayers.Bounds(
-124.73142200000001, 24.955967,
-66.969849, 49.371735
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.22563114453125,
projection: "EPSG:4326",
units: 'degrees'
};
map = new OpenLayers.Map("ch3_wfs",options);
var baseLayer = new OpenLayers.Layer.WMS("Basic","http://localhost:8080/geoserver/wms",
{
layers: "topp:states",
});
map.addLayer(baseLayer);
var statesLayer = new OpenLayers.Layer.Vector("States", {
protocol: new OpenLayers.Protocol.HTTP({
url: "http://localhost:8080/geoserver/topp/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=topp:states&maxFeatures=50&outputFormat=json",
format: new OpenLayers.Format.GeoJSON()
}),
strategies: [new OpenLayers.Strategy.Fixed()],
});
map.addLayer(statesLayer);
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(0,0), 2);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="ch3_wfs" style="width: 100%; height: 100%;"></div><br>
</body>
</html>
I prepared a simple page by using the data of a fusion table. ( FusionTablesLayer with Google Maps JavaScript API v3 ) but the map is not displayed. You can see the page here: http://www.siterary.com/0test.html . What's the problem ? The code is as below
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>test</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyBK_ErFIm-CYBsslK_9ZB6m0wPV197UaJg&sensor=false"></script>
<script>
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location' ,
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
</script>
</head>
<body onload="initialize()">
<B>MAP</B> <BR>
<div id="map_canvas"></div>
</body>
</html>
The file "/maps/documentation/javascript/examples/default.css" doesn't exist on your site. Your map doesn't have a valid size.
Working version
code snippet:
function initialize() {
var istanbul = new google.maps.LatLng(41.01, 28.97);
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: istanbul,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer = new google.maps.FusionTablesLayer({
query: {
select: 'Location',
from: '1s3DYRvmNAfKgo-swjG39-8UEb9tHMm0UPHvW_tc'
}
});
layer.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
#media print {
html,
body {
height: auto;
}
#map_canvas {
height: 650px;
}
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<B>MAP</B>
<BR>
<div id="map_canvas"></div>