Google Maps API LatLng NaN - google-maps

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>

Related

Google Map Coordinates conversion

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>

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 v3 - Can't create position marker

Trying to do a simple position marker on a Google map imbed. Everything looks right, but not working.
<link rel="stylesheet" type="text/css" href="default.css"/>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322,-82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714,-82.9121331),
map: map
});
</script></head>
The map is loading fine, but no marker is found.
You need to create the marker inside the initialize function (where the map variable exists).
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(40.0501322, -82.914233),
zoom: 13,
mapTypeId: google.maps.MapTypeId.HYBRID
}
var map = new google.maps.Map(mapCanvas, mapOptions)
var marker = new google.maps.Marker({
position: new google.maps.LatLng(40.0496714, -82.9121331),
map: map
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map {
height: 100%;
width: 100%;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>
Yes, you need to initialize the marker object inside the initialize() method of the code. One way is how geocodezip has demoed. Here is one more way if you want to write modular code.
<script type="text/javascript">
// Standard google maps function
function initialize() {
var myLatlng = new google.maps.LatLng(40.0501322, -82.914233);
var myOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
TestMarker();
}
// Function for adding a marker to the page.
function addMarker(location) {
marker = new google.maps.Marker({
position: location,
map: map
});
}
// Testing the addMarker function
function TestMarker() {
GoldenGatePark = new google.maps.LatLng(37.7699298, -122.4469157);
addMarker(GoldenGatePark);
}
</script>
Here you have added a marker in the TestMarker function and the TestMarker function is called in the initialize() method. You can just change the values of LatLng in the TestMarker function code.