map center update ?
7,891 views
Skip to first unread message
Mesh3L
Dec 23, 2010, 10:59:34 PM12/23/10
to google-map...@googlegroups.com
Hello,
I need help on which function to call when i want to change the center of the map by new LatLng.
I will have a Select list, which has name of cities. onChange , It will call a function that has a list of the cities and its Lat and Lng. Now i want to call a function and pass the Latlng to it so it centers the map to the given Latlng.
Thanks
I need help on which function to call when i want to change the center of the map by new LatLng.
I will have a Select list, which has name of cities. onChange , It will call a function that has a list of the cities and its Lat and Lng. Now i want to call a function and pass the Latlng to it so it centers the map to the given Latlng.
Thanks
Martin
Dec 23, 2010, 11:01:40 PM12/23/10
to Google Maps JavaScript API v3
http://code.google.com/apis/maps/documentation/javascript/reference.html#Map
map.setCenter(myLatLng);
Martin.
map.setCenter(myLatLng);
Martin.
geoco...@gmail.com
Dec 23, 2010, 11:02:54 PM12/23/10
to Google Maps JavaScript API v3
(or perhaps your "map" variable isn't in the global context)
-- Larry
>
> Thanks
Mesh3L
Dec 24, 2010, 12:01:55 AM12/24/10
to google-map...@googlegroups.com
Thank you all for the replies.
I'm very newbie in JavaScript and Google API.
That's what i have done regarding my topic. But it does nothing !
I'm using these values just for testing
function updateMap()
{
var lat = 24.730110212044263;
var lng = 46.65211200714111;
var zoom = 15;
map.setZoom(zoom);
map.setCenter(lat,lng);
}
and for the menu :
<select name="city" id="city" class="wide" onChange="updateMap()" >
What's wrong ?
I'm very newbie in JavaScript and Google API.
That's what i have done regarding my topic. But it does nothing !
I'm using these values just for testing
function updateMap()
{
var lat = 24.730110212044263;
var lng = 46.65211200714111;
var zoom = 15;
map.setZoom(zoom);
map.setCenter(lat,lng);
}
and for the menu :
<select name="city" id="city" class="wide" onChange="updateMap()" >
What's wrong ?
Martin
Dec 24, 2010, 2:55:28 AM12/24/10
to Google Maps JavaScript API v3
You need to pass a googe.maps.LatLng object to the setCenter method:
function updateMap()
{
var lat = 24.730110212044263;
var lng = 46.65211200714111;
var myLatLng=new google.maps.LatLng(lat, lng);
}
Martin.
function updateMap()
{
var lat = 24.730110212044263;
var lng = 46.65211200714111;
var zoom = 15;
map.setZoom(zoom);
map.setCenter(myLatLng);
map.setZoom(zoom);
}
Martin.
Sankar T
Dec 24, 2010, 4:27:17 AM12/24/10
to google-map...@googlegroups.com
You need to pass a googe.maps.LatLng object to the setCenter method:
<script type="text/javascript">
var map,centerAt;
//init function will be called upon loading of the map, this you can do by putting onload in body tag (<body onload="init()">
function init(){
var centerPnt = new google.maps.LatLng(51.55211,-106.17376);
var mapOptions = {
zoom: 3,
center: centerPnt,
continuousZoom: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
//This will be called upon you change the selected value from the drop down list
function updateMap() {
//if you have the lat/lng value in text boxes use below 2 lines to get their values.
var dropDwnLat = document.getElementById('selected Latitude field Id').value;
var dropDwnLng = document.getElementById('selected Longitude field Id').value;
var map,centerAt;
//init function will be called upon loading of the map, this you can do by putting onload in body tag (<body onload="init()">
function init(){
var centerPnt = new google.maps.LatLng(51.55211,-106.17376);
var mapOptions = {
zoom: 3,
center: centerPnt,
continuousZoom: true
};
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
}
//This will be called upon you change the selected value from the drop down list
function updateMap() {
//if you have the lat/lng value in text boxes use below 2 lines to get their values.
var dropDwnLat = document.getElementById('selected Latitude field Id').value;
var dropDwnLng = document.getElementById('selected Longitude field Id').value;
var zoom = 15;
centerAt = new google.maps.LatLng(dropDwnLat , dropDwnLng);
map.setZoom(zoom);
map.setCenter(centerAt);
centerAt = new google.maps.LatLng(dropDwnLat , dropDwnLng);
map.setZoom(zoom);
}
</script>
use can use the below code to get the selected value from the dropdown list
document.getElementById('city').options[document.getElementById('city').selectedIndex].value;
As per your requirement you should have the lat/lng values in 1 field. So that upon changing the selected value the function will be called and that selected lat/lng value you have use to set the center.
Cheers
Sankar T
Pil
Dec 24, 2010, 5:39:14 AM12/24/10
to Google Maps JavaScript API v3
On Dec 24, 10:27 am, Sankar T <sankar.ta...@gmail.com> wrote:
> continuousZoom: true
There is no such option neither in the v2 Maps API nor in the v3 Maps
API.
In v2 this is implemented using the method enableContinuousZoom() but
it's not possible to turn continuousZoom on or off in v3.
The v3 guys do not want the map users to have control over that.
Martin
Dec 24, 2010, 7:11:54 AM12/24/10
to Google Maps JavaScript API v3
Your 'map' variable is local to your load() function.
So it's not accessible by the updateMap() function.
If you make the map variable global - same as marker and latlng then
it may work:
var marker;
var latlng;
var map
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(24.688002, 46.722433),
zoom: 13,
mapTypeId: 'roadmap'
});
Martin.
> code.txt
> 4KViewDownload
So it's not accessible by the updateMap() function.
If you make the map variable global - same as marker and latlng then
it may work:
var marker;
var latlng;
var map
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(24.688002, 46.722433),
zoom: 13,
mapTypeId: 'roadmap'
});
Martin.
> 4KViewDownload
Mesh3L
Dec 24, 2010, 7:32:30 AM12/24/10
to google-map...@googlegroups.com
I have changed 'map' to a global variable.
Still not working
Still not working
Sankar T
Dec 24, 2010, 7:40:46 AM12/24/10
to google-map...@googlegroups.com
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var latlng;
var map;
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(24.688002, 46.722433),
zoom: 13,
mapTypeId: 'roadmap'
});
// Adding a new marker OR drag an existing one
google.maps.event.addListener(map, "click", function(event){
if (marker == null) {
addMarker(map,event.latLng);
}else{
marker.setMap(null);
addMarker(map,event.latLng);
}
});
var cities = eval([{"Region":{"city_id":"1","id":"1","name":"City1","lat":"24.730110212044263","lng":"46.65211200714111","zoom":"15"}},
{"Region":{"city_id":"1","id":"2","name":"City2","lat":"111111","lng":"5555555","zoom":"14"}}]);
function addMarker(map,latlng){
marker = new google.maps.Marker({
map: map,
position: latlng,
draggable: true
});
document.getElementById("latitude").value=marker.position.lat();
document.getElementById("longitude").value=marker.position.lng();
google.maps.event.addListener(marker, "dragstart", function() {
document.getElementById("latitude").value=marker.position.lat();
document.getElementById("longitude").value=marker.position.lng();
});
google.maps.event.addListener(marker, "dragend", function() {
document.getElementById("latitude").value=marker.position.lat();
document.getElementById("longitude").value=marker.position.lng();
});
}
}
function updateMap(){
var lat = 24.730110;
var lng = 46.652112;
var myLatLng=new google.maps.LatLng(lat, lng);
var zoom = 15;
map.setZoom(zoom);
map.setCenter(myLatLng);
}
</script>
</head>
<body onLoad="load()">
<p>
<span class="label">Select a City </span><br>
<select name="state" id="state" class="wide" onChange="updateMap()">
<option value="City1" >City1</option>
<option value="City2" >City2</option>
</select>
</p>
<table width="800x" height="600px" border="1" align="center" bordercolor="#CC3300">
<tr>
<td width="800" height="600" bordercolor="#CC3300"><div id="map" style="width: 800x; height: 600px" bordercolor="#CC3300"></div></td>
</tr>
</table>
<p> </p>
<form name="add" id="add" class="formular" method="post" type="hiden" action="view.php" enctype="multipart/form-data" >
<input type="hidden" readonly="true" name="longitude" id="longitude"/>
<input type="hidden" readonly="true" name="latitude" id="latitude"/>
<p align="center" class="marigintop"><input class="submit" type="submit" name="add_sub" id="add_sub" value="" /></p>
</form>
</body>
</html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>PHP/MySQL & Google Maps Example</title>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var marker;
var latlng;
var map;
var customIcons = {
restaurant: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
bar: {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(24.688002, 46.722433),
zoom: 13,
mapTypeId: 'roadmap'
});
google.maps.event.addListener(map, "click", function(event){
if (marker == null) {
addMarker(map,event.latLng);
}else{
marker.setMap(null);
addMarker(map,event.latLng);
}
});
var cities = eval([{"Region":{"city_id":"1","id":"1","name":"City1","lat":"24.730110212044263","lng":"46.65211200714111","zoom":"15"}},
{"Region":{"city_id":"1","id":"2","name":"City2","lat":"111111","lng":"5555555","zoom":"14"}}]);
function addMarker(map,latlng){
marker = new google.maps.Marker({
map: map,
position: latlng,
draggable: true
});
document.getElementById("latitude").value=marker.position.lat();
document.getElementById("longitude").value=marker.position.lng();
google.maps.event.addListener(marker, "dragstart", function() {
document.getElementById("latitude").value=marker.position.lat();
document.getElementById("longitude").value=marker.position.lng();
});
google.maps.event.addListener(marker, "dragend", function() {
document.getElementById("latitude").value=marker.position.lat();
document.getElementById("longitude").value=marker.position.lng();
});
}
}
function updateMap(){
var lat = 24.730110;
var lng = 46.652112;
var myLatLng=new google.maps.LatLng(lat, lng);
var zoom = 15;
map.setZoom(zoom);
map.setCenter(myLatLng);
}
</head>
<body onLoad="load()">
<p>
<span class="label">Select a City </span><br>
<select name="state" id="state" class="wide" onChange="updateMap()">
<option value="City1" >City1</option>
<option value="City2" >City2</option>
</select>
</p>
<table width="800x" height="600px" border="1" align="center" bordercolor="#CC3300">
<tr>
<td width="800" height="600" bordercolor="#CC3300"><div id="map" style="width: 800x; height: 600px" bordercolor="#CC3300"></div></td>
</tr>
</table>
<p> </p>
<form name="add" id="add" class="formular" method="post" type="hiden" action="view.php" enctype="multipart/form-data" >
<input type="hidden" readonly="true" name="longitude" id="longitude"/>
<input type="hidden" readonly="true" name="latitude" id="latitude"/>
<p align="center" class="marigintop"><input class="submit" type="submit" name="add_sub" id="add_sub" value="" /></p>
</form>
</body>
</html>
Mesh3L
Dec 24, 2010, 8:02:13 AM12/24/10
to google-map...@googlegroups.com
IT WORKED !!!
thank you so much. can you please explain what was wrong with my code ? i cant see the deference !
thank you so much. can you please explain what was wrong with my code ? i cant see the deference !
Sankar T
Dec 24, 2010, 8:25:54 AM12/24/10
to google-map...@googlegroups.com
You placed all the functions in the load function. Thats why JS is not identifying the reference to updateMap function.
Cheers
Sankar T
Cheers
Sankar T
Mesh3L
Dec 24, 2010, 8:30:32 AM12/24/10
to google-map...@googlegroups.com
THANK YOU
Reply all
Reply to author
Forward
0 new messages