Google Maps Events
Click the mark to zoom the map
We still use the map of London, England that we used in the previous article.
When the user clicks the mark, the function of zooming the map is realized (the map zoom event is bound when the mark is clicked).
The code is as follows:
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center: myCenter, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP };var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker = new google.maps.Marker({ position: myCenter, title:'Click to zoom' });marker.setMap(map);// Zoom to 9 when clicking on markergoogle.maps.event.addListener(marker,'click',function() { map.setZoom(9); map.setCenter(marker.getPosition()); });}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Use the addListener() event handler to register the listening of the event. This method uses an object and an event to listen for, and the function will be called when the specified event occurs.
Reset the mark
We change the 'center' attribute by adding an event handler to the map. The following code uses the center_changed event to mark the center point after 3 seconds:
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center: myCenter, zoom:5, mapTypeId: google.maps.MapTypeId.ROADMAP };var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker = new google.maps.Marker({ position: myCenter, title:'Click to zoom' });marker.setMap(map);// Zoom to 9 when clicking on markergoogle.maps.event.addListener(marker,'click',function() { map.setZoom(9); map.setCenter(marker.getPosition()); }); 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.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>The message window opens when you click the mark.
Click the tag to display some text information in the information window:
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP };var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);var marker=new google.maps.Marker({ position:myCenter, });marker.setMap(map);var infowindow = new google.maps.InfoWindow({ content:"Hello World!" });google.maps.event.addListener(marker, 'click', function() { infowindow.open(map,marker); });}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>Setting marks and opening the information window for each mark
Execute a window when the user clicks on the map
When a user clicks a location on a map, use the placeMarker() function to place a mark on the specified position and a message window pops up:
Example
<html><head><scriptsrc="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false"></script><script>var map;var myCenter=new google.maps.LatLng(51.508742,-0.120850);function initialize(){var mapProp = { center:myCenter, zoom:5, mapTypeId:google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("googleMap"),mapProp); google.maps.event.addListener(map, 'click', function(event) { placeMarker(event.latLng); });}function placeMarker(location) { var marker = new google.maps.Marker({ position: location, map: map, }); var infowindow = new google.maps.InfoWindow({ content: 'Latitude: ' + location.lat() + '<br>Longitude: ' + location.lng() }); infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', initialize);</script></head><body><div id="googleMap"></div></body></html>The above is a compilation of the basic knowledge of Google Maps events. We will continue to add relevant knowledge in the future. Thank you for your support for this site!