Accessing variables from other functions javascript - javascript

am new in java script, am sorry if Q stupid.
in my code i have a center position with lat and long , i hava another function to update the center position .
the problem: i want to change marker position from center position to new center position when call pan() function.
var panPoint;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
var marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
map.panTo(panPoint)
}

If you want to change the marker position also, you need to make the reference to it global (like you did with panPoint), define it outside of any functions, remove the var from in front of it inside your myMap function. Note that you also need to make map global as well, for the center to actually change.
var marker;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
Then move it when you call your pan function:
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
marker.setPosition(panPoint);
map.panTo(panPoint)
}
proof of concept fiddle
code snippet:
var panPoint;
var map;
var marker;
function myMap() {
var Center = new google.maps.LatLng(32.224063, 35.230539);
var mapProp = {
zoom: 8,
center: Center,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var canvas = document.getElementById("googleMap");
map = new google.maps.Map(canvas, mapProp);
marker = new google.maps.Marker({
position: Center
});
marker.setMap(map);
}
google.maps.event.addDomListener(window, 'load', myMap);
function pan() {
panPoint = new google.maps.LatLng(document.getElementById("lat").value, document.getElementById("lng").value);
marker.setPosition(panPoint);
map.panTo(panPoint)
}
html,
body,
#googleMap {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="lat" value="32.224063" />
<input id="lng" value="35.230539" />
<input id="btn" type="button" onClick="pan();" value="pan" />
<div id="googleMap"></div>

Related

How to get distance between rectangle center and middle points

I have got rectangle bounds, used
map.getBounds();
Now I would like to calculate distance (in meters) between rectangle center and shorter middle point.
Already have some code:
var mapCenter = this.map.getCenter()
var mapBounds = this.map.getBounds();
var southEast = mapBounds.getSouthWest();
var middlePoint = ??;
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint);
But I don't know how to get shorter distance (from center) middle point.
The latitude of the "top" of the bounds is the northern latitude of the bounds: mapBounds.getNorthEast().lat(). The longitude of the center of the bounds is the longitude of the center of the bounds mapBounds.getCenter().lng()
(if you don't know which side is the "shorter" one, calculate both and use the shorter value)
var mapCenter = map.getCenter()
var mapBounds = map.getBounds();
var southEast = mapBounds.getSouthWest();
var middlePoint = new google.maps.LatLng(mapBounds.getNorthEast().lat(), mapBounds.getCenter().lng());
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint);
proof of concept fiddle
code snippet:
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
});
google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
var mapCenter = map.getCenter()
var mapBounds = map.getBounds();
var rectangle = new google.maps.Rectangle({
map: map,
bounds: mapBounds
});
var southEast = mapBounds.getSouthWest();
var middlePoint = new google.maps.LatLng(mapBounds.getNorthEast().lat(), mapBounds.getCenter().lng());
var radius = google.maps.geometry.spherical.computeDistanceBetween(mapCenter, middlePoint);
var circle = new google.maps.Circle({
center: mapCenter,
radius: radius,
map: map
});
var marker = new google.maps.Marker({
position: middlePoint,
map: map
});
var line = new google.maps.Polyline({
map: map,
path: [mapCenter, middlePoint]
});
document.getElementById('info').innerHTML = radius.toFixed(2);
map.setZoom(12);
});
}
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"></script>
<div id="info"></div>
<div id="map_canvas"></div>

I need to set the center of the circle to user's current location

I have the following code that let the user set the radius of the circle through input box and button. What I need to do is to set the center of the circle to the user's current location. Any help will be appreciated.
<apex:page sidebar="false" showheader="false">
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { width:100%;height:80%; }
.controls
</style>
<script src="https://maps.googleapis.com/maps/api/js?key=XXXXXX"></script>
<script>
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
var circle;
function initialize() {
var mapProp = {
center: myCenter,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
circle = new google.maps.Circle({
map: map,
radius: 100, // 10 miles in metres
fillColor: '#AA0000',
center: myCenter
});
marker.setMap(map);
}
function updateRadius(){
var rad = document.getElementById("value_rad").value;
circle.setRadius(parseFloat(rad));
}
google.maps.event.addDomListener(window, 'load', initialize);
console.log()
</script>
</head>
<body>
<div id="googleMap" style="width:100%;height:80%;"></div>
<input id="value_rad" />
<input id="radius" type="button" value="Search" onclick="updateRadius()"/>
</body>
</apex:page>
What you're after is called Geolocation, there's a good writeup here:
https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation
You'll need to grab the users latitude and longitude within the success callback for
navigator.geolocation.getCurrentPosition(success, error, options);
Eg
function success(pos) {
var crd = pos.coords;
var myCenter = new google.maps.LatLng(crd.latitude, crd.longitude);
// init map and whatnot
};
You'll need to do some checks to ensure that fetching the users location is allowed, there are references to that in the link above.
You need to geolocate the user (which requires the user to agree to share his/her position):
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
var myCenter = new google.maps.LatLng(latitude, longitude);
//rest of function
});
}
Note - to do this on Chrome, you will need to use https.

Using latitude and longitude to pin point a location in google maps

I wrote a script to add maps to my website. It is as follows:
<script>
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
HTML code:
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map">
</div>
css:
#map{
width: 500px;
height: 400px;
}
I added this code for pin pointing a location:
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
//give latitude and long
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
But when I used that code, map on my page disappeared. How can I make it to work?
You are creating map two time on same div that's why its happening just change your code as below:
function initialize() {
var mapCanvas = document.getElementById('map');
var mapOptions = {
center: new google.maps.LatLng(12.9583182, 77.6398512),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var myLatlng = new google.maps.LatLng("12.9583182", "77.6398512");
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Bangalore"
});
}
google.maps.event.addDomListener(window, 'load', initialize);
there is no need to add var map = new google.maps.Map(mapCanvas, mapOptions);
second time

Google Map API seems to not load

I have a problem with a google map on my website not loading but there is still something in the container except a white background, indeed I can see the terms at the bottom right and the satellite button at the top right.
There is the code, I hope you will be able to spot what is wrong :
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize());
In you code mapCanvas seems to be unassigned. After adding something like var mapCanvas = document.getElementById('map'); the map loads as intended.
JSFiddle
Got it working.
I've added googleapis link "https://maps.googleapis.com/maps/api/js?sensor=false">.
And I've changed var map = new google.maps.Map(mapCanvas, mapOptions); to var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
And i have removed empty parentheses in the maps event listener.
<!DOCTYPE html>
<html>
<head>
<style>
#map-canvas {
width: 600px;
height: 600px;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script>
function initialize() {
var myLatLng = new google.maps.LatLng(49.724305, 4.716567);
var mapOptions = {
center: myLatLng,
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = {
url: '/media/A.png',
size: new google.maps.Size(56, 67),
origin: new google.maps.Point(0, 0),
anchor: new google.maps.Point(32, 67),
scaledSize: new google.maps.Size(56, 67)
};
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
</body>

Google Map is shown only on top left corner of the map div

Using google documentation I tried to embed google map inside Razor web page.
<script>
function initialize() {
var lat = 45.430817;
var lon = 12.331516;
var mapCanvas = document.getElementById('map-canvas');
var mapOptions = {
center: new google.maps.LatLng(lat, lon),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(mapCanvas, mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
</script>
But final result looks like this
It has already happened to me. In this case you need to add a resize right after the tab click. some things like:
<div id='init_tab' class='tab_item' onclick="google.maps.event.trigger(map, 'resize');">

Categories

Resources