Manipulating map using buttons
GD All,
I've been experimenting with google maps over last few days and was tring
to get some interaction with the map by using a button to either drop a
marker or draw a path.
From scouting around here and reading several posts I can find numerous
options though all tell more or less same story, it should be relatively
simple...
Unfortunately I have been unable to produce the desired result so far..:-(
I've tried several things: - adding alerts, so I can see if the function
is actually called = ok! - integrating the code from the function in the
initialize(), to check if the function code is ok = ok!
Yet still cannot seem to get it working...
So, the buttons do call the functions, yet they do not seem to update the
map after the function call. I.e. there is nothing changing on the map...?
Any help will be much appreciated.
Basically they 'click listener in the initialize does the same as the
'callMe' function Yet if I have the listener refer to the 'callMe'
function it does not execute, eventhough the alert box triggers, a.k.a.
the function is properly called.
My .php code:
<!DOCTYPE html>
<html>
<head>
<title>Simple click event</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<link href="/maps/documentation/javascript/examples/default.css"
rel="stylesheet">
<script
src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882, 131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map-canvas'),
mapOptions);
var marker = new google.maps.Marker({
position: map.getCenter(),
map: map,
title: 'Click to zoom'
});
google.maps.event.addListener(map, 'center_changed', function() {
// 3 seconds after the center of the map has changed, pan back to the
// marker.
window.setTimeout(function() {
map.panTo(marker.getPosition());
}, 3000);
});
google.maps.event.addListener(marker, 'click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
function callMe(){
alert('function called');
map.setZoom(8);
map.setCenter(marker.getPosition());
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas" style="width: 100%; height: 300px"></div>
<div>
<button id="btnOK" onclick="callMe()">Drop marker</button>
</div>
</body>
</html>
Many thanks !
Martijn
No comments:
Post a Comment