Google Map Coordinates conversion - google-maps

I have coordinates with unknown form
for example : X : 187341.9208 , Y : 665722.3982 ,
What projection are these coordinates in?
The main purpose is to convert those coordinates to Lat and Lng form that will work in Google Maps.
The source of those coordinates are unknown to me, it's a city in Israel. According to Google coordinates to this city is lat: 32.096 , lng: 34.886

Looks like those coordinates are in the Israeli Transverse Mercator Projection
https://epsg.io/transform#s_srs=2039&t_srs=4326&x=187341.9208000&y=665722.3982000
gives {lat: 32.0844147, lng: 34.8643428}, seems pretty close.
function initMap() {
var myLatLng = {
lat: 32.0844147,
lng: 34.8643428
};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: myLatLng
});
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: '187341.9208,665722.3982'
});
}
html,
body,
#map {
height: 100%;
margin: 0;
padding: 0;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>

Related

how to decode a google polyline from a static map which contain ascii numbers below 63?

I am trying to get from an encoded polyline to coordinates, but the original data, which produce a result, have some ascii numbers below 63, making that it is no possible to get the original latitude and longitude. For example:
http://maps.googleapis.com/maps/api/staticmap?scale=2&markers=label:S|30.17637634277344,-97.81493377685547&markers=label:E|30.1741943359375,-97.82305145263672&path=enc:eydwDnm_tQp#FD#F?F?d#C%7C#SJCHGHGDGDGTm#NHFBJDNBP#%5E#zBETHD%60K#vBJvMBzE#%60H?bA?h##pA#Z??&size=600x600&sensor=false
Here you can see that it produce correctly the map, but the polyline contain %, 7, 5 and 6. what can I do in order to get the latitude and longitude correct using this polyline? I am using this algorithm:
https://developers.google.com/maps/documentation/utilities/polylinealgorithm
thanks!
That URL is url encoded. Before running it through the encoded polyline decoder, you need to "un-URL encode" it.
If I plug it into a URL decoder, I get
eydwDnm_tQp#FD#F?F?d#C|#SJCHGHGDGDGTm#NHFBJDNBP#^#zBETHD`K#vBJvMBzE#`H?bA?h##pA#Z??
If I run that through the decoder, it works.
proof of concept fiddle (javascript)
code snippet:
var geocoder;
var map;
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var encPoly = 'eydwDnm_tQp#FD#F?F?d#C%7C#SJCHGHGDGDGTm#NHFBJDNBP#%5E#zBETHD%60K#vBJvMBzE#%60H?bA?h##pA#Z??';
var polyline = new google.maps.Polyline({
map: map,
path: google.maps.geometry.encoding.decodePath(decodeURI(encPoly))
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < polyline.getPath().getLength(); i++) {
bounds.extend(polyline.getPath().getAt(i));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>

Center map to my location

I have the following code:
map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 13,
center: new google.maps.LatLng(53.529773,-113.509387),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
How can I replace:
center: new google.maps.LatLng(53.529773,-113.509387)
with my current location, programatically
Your code looks correct, I suspect that your issue is that your device does not have location services enabled, if it does you may not have accept the security prompt when it runs the first time.
This following demo I modified from the google maps API reference
https://developers.google.com/maps/documentation/javascript/
HTML Demo
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
CSS
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
JS
function initMap() {
// Pick a start point, I live in Australia, so just picked the middle of OZ
var myLatLng = {lat: -25.363, lng: 131.044};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
// Mark it on the map, this is the original center
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
title: 'Hello World!'
});
// If location services is enabled, the following should center the map on your location.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (position) {
var location = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map.setCenter(location);
});
}
}

How do I highlight a road on a Google map?

I wish to highlight a Google map of Lincoln, NE. according to regions defined by the Multiple Listing Services (MLS) map of the city. This region map can be found here:
http://www.lincolnrealtors.com/pdf/MLS_Area_Map
I can construct simple polygons for example hightlighting region 31 in the diagram above using:
// Define the LatLng coordinates for the polygon's path.
var Region31 = [
{lat:40.813614, lng: -96.682262},
{lat: 40.813484, lng: -96.644154},
{lat: 40.788145, lng: -96.644154},
{lat: 40.8027, lng: -96.682348},
{lat: 40.813614, lng: -96.682262}
];
But those are only lines when in reality, the MLS regions are delineated in terms of actual highways. For example, region 31 has its lower border along "Normal Blvd" which is not a straight line as you can see by looking at the Google map.
Is there a means of highlighting a particular length of highway in Google Maps and if so, could someone explain this or suggest a reference?
Thanks,
Dominic
You can use the DirectionsService to return polylines that follow the roads.
proof of concept fiddle (I needed to adjust some of your points to avoid the directions service adding extra turns)
code snippet:
var geocoder;
var map;
// Define the LatLng coordinates for the polygon's path.
var Region31 = [{
lat: 40.813436,
lng: -96.682268
}, {
lat: 40.813363,
lng: -96.644167
}, {
lat: 40.788145,
lng: -96.644154
}, {
lat: 40.8027,
lng: -96.682348
}, {
lat: 40.813435,
lng: -96.682267
}];
function initialize() {
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < Region31.length; i++) {
var marker = new google.maps.Marker({
position: Region31[i],
map: map,
draggable: true
});
bounds.extend(marker.getPosition());
var directionsService = new google.maps.DirectionsService();
directionsService.route({
origin: Region31[i],
destination: Region31[(i + 1) % Region31.length],
travelMode: google.maps.TravelMode.DRIVING
}, function(response, status) {
if (status === google.maps.DirectionsStatus.OK) {
var directionsDisplay = new google.maps.DirectionsRenderer({
map: map,
preserveViewport: true
})
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry,places&key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div id="map_canvas"></div>
The only api came in my mind is Polyline.

Google Maps API LatLng NaN

I'm struggling with the Google Maps JavaScript API v3. I need to create a new LatLng object with some specific coordinates. According to the API this one should simply do the trick:
myLatLng = new google.maps.LatLng({lat: -34, lng: 151});
Currently doing so simply creates the desired object but with values representing NaN. So no matter what I'm doing, I can't create a proper LatLng object and even the docs aren't helping me much.
The google.maps.LatLng constructor takes two numbers as arguments, not a google.maps.LatLngLiteral.
myLatLng = new google.maps.LatLng({lat: -34, lng: 151});
should be:
myLatLng = new google.maps.LatLng(-34, 151);
In many cases you can use a google.maps.LatLngLiteral instead of a google.maps.LatLng.
myLatLng = {lat: -34, lng: 151};
code snippet:
var geocoder;
var map;
function initialize() {
var myLatLng = new google.maps.LatLng(-34, 151);
var myLatLng2 = {
lat: -34.05,
lng: 151
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: myLatLng,
zoom: 11,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: myLatLng2,
map: map
})
}
google.maps.event.addDomListener(window, "load", initialize);
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

Map markers in street view

First of all, I'm not really sure if this question is really for Stack Overflow, please tell me where I should move it if it's necessary.
Is it possible to add custom pins (map markers) in Google Maps Street View? If the answer is "yes" please provide additional information about how it can be done (links to sources, tips, etc.). Tried searching on Google for "google maps street view markers" but I couldn't find anything relevant.
Yes is possible
you can easy found sample like this on google dev
this is the js sample code by google development
var panorama;
function initMap() {
var astorPlace = {lat: 40.729884, lng: -73.990988};
// Set up the map
var map = new google.maps.Map(document.getElementById('map'), {
center: astorPlace,
zoom: 18,
streetViewControl: false
});
// Set up the markers on the map
var cafeMarker = new google.maps.Marker({
position: {lat: 40.730031, lng: -73.991428},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=cafe|FFFF00',
title: 'Cafe'
});
var bankMarker = new google.maps.Marker({
position: {lat: 40.729681, lng: -73.991138},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=dollar|FFFF00',
title: 'Bank'
});
var busMarker = new google.maps.Marker({
position: {lat: 40.729559, lng: -73.990741},
map: map,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=bus|FFFF00',
title: 'Bus Stop'
});
// We get the map's default panorama and set up some defaults.
// Note that we don't yet set it visible.
panorama = map.getStreetView();
panorama.setPosition(astorPlace);
panorama.setPov(/** #type {google.maps.StreetViewPov} */({
heading: 265,
pitch: 0
}));
}
function toggleStreetView() {
var toggle = panorama.getVisible();
if (toggle == false) {
panorama.setVisible(true);
} else {
panorama.setVisible(false);
}
}