I want to create boundaries of a zipcode using google map places api but unable to find the boundary coordinates.
I noticed when I search a zipcode on maps.google.com it shows a dotted boundary of that particular zipcode. How can I achieve this using google services?
You can do it with DDS (Data-driven styling) if zipcode is available in the country/countries you are after (check coverage).
Note this feature is still in Preview (Pre-GA) at this time.
Below is an example drawing the boundaries of a random postal code in Italy (10123 Torino, Italy).
To reproduce, you need to create a new map ID and map style in your Google Maps Platform console and select the appropriate feature layer(s). All information is here.
let map;
let featureLayer;
function initMap() {
map = new google.maps.Map(document.getElementById("map"), {
center: { lat: 45.064335, lng: 7.688176 },
zoom: 13,
mapId: "8ec1ff859561face", // You need to create your own map ID
});
featureLayer = map.getFeatureLayer("POSTAL_CODE");
// Define the styling options
const featureStyleOptions = {
strokeColor: "#00FF00",
strokeOpacity: 1,
strokeWeight: 1,
fillColor: '#519400',
fillOpacity: 1,
};
// Apply the style to a single boundary.
featureLayer.style = (options) => {
if (options.feature.placeId == "ChIJ_7qz12VtiEcRcKS3k4DmBRw") {
// Above Place ID is zipcode 10123 Torino, Italy
return featureStyleOptions;
}
};
}
#map {
height: 180px;
}
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap&v=beta" defer></script>
Related
I am using Google Maps API JavaScript. My use case is I need to plot coordinates (lat, lng) on maps (create markers) and join them through polyline. The co-ordinates will be very close to each other so when I try to plot them, they get hidden behind the first marker. So I find out the center and try to zoom so that all markers will be visible on the map.
I used bounds to find the center but I am not able to zoom it to center co-ordinate. I used map.fitBounds(latlng); It fits the coordinate on the screen.
But what I want to achieve is to make polyline (connecting all co-ordinate) always horizontal and zoom it to center co-ordinate.
enter code herevar bounds = new google.maps.LatLngBounds();
for (i = 0; i < temp.length; i++) {
bounds.extend(temp[i]);
}
var latlng = bounds.getCenter();
map.setCenter(latlng);
As the coordinate will always be different, The polyline will be in any direction, but I always want to show it horizontally on the map.
what I get :
enter image description here
what i want to acheive:
enter image description here
Any suggestion will be appreciated.
Thanks in Advance.
I achieve something like this by using the following:
Use computeHeading() function of Geometry library to get the angle from your first to your last coordinate on the line. Make sure to add &libraries=geometry to your Maps JS script tag.
Once you get the heading, you can use the map.setHeading() function to change the angle of your view and after some testings,I can see that you can achieve the horizontal view by subtracting it to 90 degrees.
Here's the sample code and code snippet below:
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
center: {
lat: 40.756795,
lng: -73.954298
},
zoom: 16,
tilt: 47.5,
mapId: "90f87356969d889c",
});
//array of your points
const markerCoordinates = [
{ lat: 40.758481, lng: -73.958269 },
{ lat:40.754649, lng: -73.949563 },
];
//creating marker from your points
for (let i = 0; i < markerCoordinates.length; i++) {
const marker = markerCoordinates[i];
new google.maps.Marker({
position:marker,
map,
});
}
//creating polyline from your points
const createdPolyline = new google.maps.Polyline({
path: markerCoordinates,
geodesic: true,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2,
});
createdPolyline.setMap(map);
//get the heading(angle) of the first coordinate from the last coordinate
const heading = google.maps.geometry.spherical.computeHeading(
markerCoordinates[0],
markerCoordinates[1]
)
//once you get the heading subtract it by 90 to get a horizontal view
map.setHeading(heading-90)
}
My Problem:
I'm trying to create a data layer polygon with the Google Maps API using a geoJSON of county borders in Ireland. The data is from Ordance Survey Ireland so I'm pretty sure the problem I'm seeing is in my code somewhere.
Basically the code loops through the geoJSON file adding longitude and latitude points and drawing a line between them. When one county is done it adds the full outline to the map and moves to the next county. As you can see the outlines jump around the map at some points but some are perfectly drawn along the border of the county.
I have tried loading the geoJSON directly from the source URL as detailed in the API documentation and also played with the looping in my code but to no avail. Any help would be greatly appreciated.
Here is a link to the geoJSON I am using: Counties GEOJSON
<script>
let map;
function initMap() {
const map = new google.maps.Map(document.getElementById("map"), {
zoom: 7,
center: {
lat: 53.411080,
lng: -7.710753
},
mapTypeId: "roadmap",
});
let counties = httpGet('https://jameswalshe.ie/countiesGEOJSON.geojson');
counties = JSON.parse(counties);
for (let s = 0; s < counties['features'].length; s++) {
var countiesCoords = [];
var countyName = "county" + s;
for (let i = 0; i < counties['features'][s]['geometry']['coordinates'].length; i++) {
for (let y = 0; y < counties['features'][s]['geometry']['coordinates'][i].length; y++) {
for (let z = 0; z < counties['features'][s]['geometry']['coordinates'][i][y].length; z++) {
countiesCoords.push({
lat: counties['features'][s]['geometry']['coordinates'][i][y][z][1],
lng: counties['features'][s]['geometry']['coordinates'][i][y][z][0]
});
}
}
}
countyName = new google.maps.Polygon({
paths: countiesCoords,
strokeColor: "rgb(0, 139, 63)",
strokeOpacity: 1,
strokeWeight: 2,
fillColor: "#FF0000",
fillOpacity: 0,
});
countyName.setMap(map);
}
};
</script>
I used the map.data.loadGeoJson('data.json'); method instead of loading from another domain.
I wanna know locations (Latitude and Longitude) of google street view images around a specific location. How do i do ? (google maps api, javascript, URL)
Check this link out for geo locationshould send you in the right direction. It works on the persons IP address, so if their IP is masked or re-routed, you will not get ACCURATE longitude and latitude, but the location of their ISP
From the documentation (emphasis mine):
Directly Accessing Street View Data
You may wish to programmatically determine the availability of Street View data, or return information about particular panoramas, without requiring direct manipulation of a map/panorama. You may do so using the StreetViewService object, which provides an interface to the data stored in Google's Street View service.
You may initiate two types of requests to the StreetViewService:
<snip>
Request with a StreetViewLocationRequest this searches for panorama data over a given area, given a passed LatLng.
code snippet (copied from this example in the documentation, click on the map to return the nearest StreetView panorama)
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var berkeley = {
lat: 37.869085,
lng: -122.254775
};
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: berkeley,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({
location: berkeley,
radius: 50
}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({
location: event.latLng,
radius: 50
}, processSVData);
});
}
function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
marker.addListener('click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error('Street View data not found for this location.');
}
}
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?callback=initMap"></script>
I'm working on a project which displays a bunch of markers on Google Maps and allows the user to search and get relevant information about the locations. I haven't disabled Street View, as I'd like to give the user the possibility to see the building from the outside.
For certain locations, however, when going into Street View mode, Google Maps immediately shows the indoor of an adjacent business. What I'd like to have is the ability to completely disable indoor view on my application.
Is anyone aware of a certain setting in the Google Maps API that would do that or perhaps a clever hack to solve the issue? I haven't honestly found anything.
In the experimental version (currently v=3.21) there is now a StreetViewSource that can be provided in a StreetViewLocationRequest
StreetViewSource class
google.maps.StreetViewSource class
Identifiers to limit Street View searches to selected sources.
Constant
DEFAULT Uses the default sources of Street View, searches will not be limited to specific sources.
OUTDOOR Limits Street View searches to outdoor collections only.
example of request without source: google.maps.StreetViewSource.OUTDOOR (fiddle)
example of request with source: google.maps.StreetViewSource.OUTDOOR (fiddle)
code snippet (with source: OUTDOOR):
/*
* Click the map to set a new location for the Street View camera.
*/
var map;
var panorama;
function initMap() {
var myLatlng = new google.maps.LatLng(51.343364, 12.378962999999999);
var sv = new google.maps.StreetViewService();
panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'));
// Set up the map.
map = new google.maps.Map(document.getElementById('map'), {
center: myLatlng,
zoom: 16,
streetViewControl: false
});
// Set the initial Street View camera to the center of the map
sv.getPanorama({
location: myLatlng,
radius: 50,
source: google.maps.StreetViewSource.OUTDOOR
}, processSVData);
// Look for a nearby Street View panorama when the map is clicked.
// getPanoramaByLocation will return the nearest pano when the
// given radius is 50 meters or less.
map.addListener('click', function(event) {
sv.getPanorama({
location: event.latLng,
radius: 50
}, processSVData);
});
}
function processSVData(data, status) {
if (status === google.maps.StreetViewStatus.OK) {
var marker = new google.maps.Marker({
position: data.location.latLng,
map: map,
title: data.location.description
});
panorama.setPano(data.location.pano);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
marker.addListener('click', function() {
var markerPanoID = data.location.pano;
// Set the Pano to use the passed panoID.
panorama.setPano(markerPanoID);
panorama.setPov({
heading: 270,
pitch: 0
});
panorama.setVisible(true);
});
} else {
console.error('Street View data not found for this location.');
}
}
google.maps.event.addDomListener(window, 'load', initMap);
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map" style="width: 45%; height: 100%;float:left"></div>
<div id="pano" style="width: 45%; height: 100%;float:left"></div>
I am using the setRotation method for an ol.View similar to the examples available at the openlayers examples page. I have an encoded polyline that is drawn on the map and then we fit to the extent of that layer and if necessary rotate the map.
This all works great with OpenStreetMap and even a custom imagery service. This will not work with any of the Google tile services though. Is there any support for rotation of the ol.View with Google map services, if so, any examples? I didn't see any comments in the API documentation for ol.View and Google map services.
Thanks for any input.
You can use rotate control only for 45° imagery see code like this:
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(45.518970, -122.672899),
zoom: 18,
mapTypeId: google.maps.MapTypeId.SATELLITE,
heading: 90,
tilt: 45
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function rotate90() {
var heading = map.getHeading() || 0;
map.setHeading(heading + 90);
}
function autoRotate() {
// Determine if we're showing aerial imagery
if (map.getTilt() != 0) {
window.setInterval(rotate90, 3000);
}
}
google.maps.event.addDomListener(window, 'load', initialize);
You can see an example google45°
But for normal google maps the rotation is not avaliable.