I need to take coordinates from Google map URL for my JSON.
I am taking lat, lng, and zoom from URL.
But my mark doesn't appear on the same spot as on Google map mark.
For example here:
https://www.google.com/maps/place/ADRA+Laos/#17.8575854,102.1769446,8.81z/data=!4m5!3m4!1s0x3124662d079f33c5:0xcef5f2b499df9a6e!8m2!3d17.9613965!4d102.6307923
I take
lat: 17.8575854,
lng: 102.1769446,
zoom: 8.81
I guess I am missing something that I have to take.
My mark is not far from original, but not on the same spot.
Please, say me what I am missing
The coordinates after the # sign are the center of the map, not the coordinates of the place. The coordinates of the place/marker are at the end of the URL: !8m2!3d17.9613965!4d102.6307923
17.9613965,102.6307923
proof of concept fiddle
code snippet:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 17.9613965, lng: 102.6307923},
zoom: 18
});
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map
})
}
/* 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;
}
<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap" async defer></script>
Related
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>
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);
});
}
}
I tried the tutorial from this place.
When I get at the heatmap part it doesn't draw the map anymore.
I guess I must be doing something wrong but I have no clue...
The moment I remove the comments from icon: image part I'll get a map drawn,
but the heatmap part isn't working.
I hope that somebody can help me
Kind Regards
Guy
// Reference to the Firebase database.
var firebase = new Firebase("https://adopt-a-portal.firebaseio.com/");
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: 0, lng: 0},
zoom: 3
});
// Add marker on user click
map.addListener('click', function(e) {
firebase.push({lat: e.latLng.lat(), lng: e.latLng.lng()});
});
// Create a heatmap.
var heatmap = new google.maps.visualization.HeatmapLayer({
data: [],
map: map,
radius: 8
});
firebase.on("child_added", function(snapshot, prevChildKey) {
// Get latitude and longitude from Firebase.
var newPosition = snapshot.val();
// Create a google.maps.LatLng object for the position of the marker.
// A LatLng object literal (as above) could be used, but the heatmap
// in the next step requires a google.maps.LatLng object.
var latLng = new google.maps.LatLng(newPosition.lat, newPosition.lng);
// Place a marker at that location.
var image = 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png';
var marker = new google.maps.Marker({
position: latLng,
map: map
// icon: image
});
heatmap.getData().push(latLng);
});
}
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body { height: 100%; margin: 0; padding: 0; }
#map { height: 100%; }
</style>
<script src="https://cdn.firebase.com/js/client/2.2.1/firebase.js"></script>
</head>
<body>
<div id="map"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
<script src="map.js"> </script>
</body>
</html>
I get a javascript error with your code: Uncaught TypeError: Cannot read property 'HeatmapLayer' of undefined
You aren't including the visualization library.
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
Should be (note the added "libraries=visualization"):
<script src="https://maps.googleapis.com/maps/api/js?libraries=visualization&key=AIzaSyABc8Rw-DxVzajwPZ8C90cfFT69LfAec6o®ion=BE&callback=initMap"
async defer></script>
proof of concept fiddle
I would like to display name of the place next to the marker as shown in the below screen shot. Currently I don't need rest of the details appearing in Google Maps. All I care is that name of the hotel should appear along with the Marker.
Example: Courtyard Marriott Hotel - Google Maps link which clearly shows the name.
I have created demo jsFiddle (doesn't show the label)
var googleMap;
var hotelLocation = {
lat: 43.681592,
lng: -79.713612
};
var mapCenter = hotelLocation; //{ lat: 43.690497, lng: -79.966831 };
google.maps.event.addDomListener(window, 'resize', function() {
//https://stackoverflow.com/questions/8792676/center-google-maps-v3-on-browser-resize-responsive
var center = googleMap.getCenter();
google.maps.event.trigger(googleMap, "resize");
googleMap.setCenter(center);
});
function InitializeGoogleMaps() {
//http://www.latlong.net/convert-address-to-lat-long.html
//90 Biscayne Crescent, Brampton, ON - Address of Hotel - { lat: 43.681592, lng: -79.713612 };
googleMap = new google.maps.Map(document.getElementById('map'), {
zoom: 14,
center: mapCenter
});
var marker = new google.maps.Marker({
position: hotelLocation,
map: googleMap,
title: 'Courtyard by Marriott'
});
}
InitializeGoogleMaps();
I have gone thru many search terms (as I am not sure what is the right word for this label and gone thru Maps Marker API too) but so far no luck. I think below thread seems to be on the same lines however I am hoping that there will be built in support inside Google maps rather then going for extra lib.
How to display a label next to a Marker for Google Maps?
It is more likely for comment, but excuse me (I can not comment yet ;))
Positioning can be done over margin, instead of counting by marker size.
It is tiny update of ndd jsFiddle in comment here https://stackoverflow.com/a/34145265/2686510
http://jsfiddle.net/6t3pyr94/
Someone could find it helpful to have css freedom of label position.
.map-marker-label {
position: absolute;
color: red;
font-size: 16px;
font-weight: bold;
/* Use margin to position the text */
/* top, left position is the place of marker position */
margin-top: -45px;
margin-left: 20px;
}
You can use pixelOffset:
pixelOffset: new google.maps.Size(100,140);
The result would be:
var marker = new google.maps.Marker({
position: hotelLocation,
map: googleMap,
title: 'Courtyard by Marriott',
pixelOffset: new google.maps.Size(100,140);
});
I'm new to google maps and want to use google map javascript API to display houses as markers. I want a person to be able to click on the map to place a marker, which can be clicked again to be removed or dragged to another location on the map. Then, I want the script to get the cordinates(lat and long) so that I can ad it to a database table. Any idea how I should do this? I'm using PHP in codeIgniter.
A good place to start would be to check out the reference manual: http://code.google.com/apis/maps/documentation/javascript/reference.html
If you look at map there you can see that it has an event called "click". What you do is after your map has been initialized you make an eventlistener, that listens to the click event. When that occurs you then place a marker on that location, and add an eventlistener on that marker for the click event if you want to remove it, or make it draggable if you want to drag it.
Remember to store your markers in an array if you ever want to use the information they are holding again.
I hope this helped.
I am late to the party. Please find below code snipet.
/* 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;
}
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
var marker;
map.addListener('click', function(e) {
if(marker){
var latlng = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
marker.setPosition(latlng);
}else{
marker = new google.maps.Marker({
position: {lat : e.latLng.lat(), lng : e.latLng.lng()},
map: map
})
}
alert("lat : "+e.latLng.lat()+ "; lng : "+e.latLng.lng())
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDNPpCPQOwkMotaDj0IgHQ7HDAE8cz6-4U&callback=initMap"
async defer></script>