Until this recipe, the map has been interactive within itself. Users can zoom in/out, drag the map, change the user interface, or enable/disable mouse interactivity. If you want to play with the map outside of it, you should access the map and change the properties you want, or you can change the properties programmatically in different cases. Changing map properties programmatically is one of the important parts of the Google Maps JavaScript API. In most mapping applications, a user searches for a place, and the application should focus on that point on the map. This is possible with the map object's functions. There are lots of map functions, but we will cover only the most used ones.
In this recipe, we will create a mapping application that a user can interact with outside the map. Buttons are used in order to interact with the map.
Before you continue, a map object must be created in order to interact with it. If a map object is not defined, you will get an error. These kinds of problems occur due to JavaScript's asynchronous behavior in most cases.
You can find the source code at Chapter 1/ch01_interaction_map.html.
Changing the map properties is quite easy if you follow the given steps:
Let's start by creating a new empty file named
interaction_map.html. Then, copy all of the code in the HTML file (map.html) that was introduced in the Creating a simple map in a custom DIV element recipe and paste it into the new file.Add the following functions after the
initmap()function. These functions are called by the buttons defined in HTML, which are used to interact with the map. Functions are explained later in this recipe.function zoomToIstanbul () { var istanbul = new google.maps.LatLng(41.0579,29.0340); map.setCenter(istanbul); } function zoomToStreet () { map.setZoom(18); } function disableDrag () { map.setOptions ({ draggable: false }); } function setMaxZoom () { map.setOptions ({ maxZoom: 12 }); } function setMinZoom () { map.setOptions ({ minZoom: 5 }); } function changeUI () { map.setOptions ({ disableDefaultUI: true }); } function disableScroll () { map.setOptions ({ scrollwheel: false }); }Next, add the following function to listen to the click events of the buttons defined in the HTML code in step 5.
function startButtonEvents () { document.getElementById('btnZoomToIst' ).addEventListener('click', function(){ zoomToIstanbul(); }); document.getElementById('btnZoomToStr' ).addEventListener('click', function(){ zoomToStreet(); }); document.getElementById('btnDisableDrag' ).addEventListener('click', function(){ disableDrag(); }); document.getElementById('btnMaxZoom' ).addEventListener('click', function(){ setMaxZoom(); }); document.getElementById('btnMinZoom' ).addEventListener('click', function(){ setMinZoom(); }); document.getElementById('btnChangeUI' ).addEventListener('click', function(){ changeUI(); }); document.getElementById('btnDisableScroll' ).addEventListener('click', function(){ disableScroll(); }); }The
startButtonEventsfunction must be called on initializing the map, so the following line of code is added:startButtonEvents();
Then, add the following HTML lines of code inside the
<body>tag. These are the<button>tags to be shown on the web page. Eachbuttonelement listens for the click event to fire the related function.<input id="btnZoomToIst" type="button" value="Zoom To Istanbul"> <input id="btnZoomToStr" type="button" value="Zoom To Street Level"> <input id="btnDisableDrag" type="button" value="Disable Drag"> <input id="btnMaxZoom" type="button" value="Set Max Zoom to 12"> <input id="btnMinZoom" type="button" value="Set Min Zoom to 5"> <input id="btnChangeUI" type="button" value="Change UI"> <input id="btnDisableScroll" type="button" value="Disable Scroll Zoom">
Enter the URL of your local server, where your
interaction_map.htmlfile is stored, in your favorite browser and take a look at the result. You will see the map with buttons at the top. Each button triggers a different function to interact with the map.
As a result of the recipe, we can change map properties programmatically.
Each JavaScript function defined previously is used to change the different sides of the map. The ones most used are to change the center and zoom level of the map. Most of the time, people just move from one location to another on a map. For example, if you are showing the locations of a coffee chain, the map should focus on each of the locations of the coffee shops. The following code creates a google.maps.LatLng object that will be the input of the setCenter() function. The 41.0579 and 29.0340 values are the latitude and longitude of Istanbul, Turkey respectively. You will replace these coordinate values with your own coordinate values to change the center of the map. This function will only change the center of the map, not the zoom level.
var istanbul = new google.maps.LatLng(41.0579,29.0340);
map.setCenter(istanbul);If you want to zoom in or out of the map in order to cover/show an area, you should also play with the zoom value. For example, your coffee shop location at zoom level 6 cannot provide effective guidance to your customers. It should at least be at level 15 or more to see the street names and the exact location. This can be done with the following code:
map.setZoom(18);
In some cases, you don't want users to interact with the map, such as fixing the map location, by disabling mouse drags or wheel scrolls. These are some examples of the google.maps.MapOptions object's properties. These properties are directly related to the properties of the map. If you want to change one or more properties of the map, you should create a JSON object and call the following map function:
map.setOptions ({
draggable: false,
maxZoom: 12
});With the setOptions() function, you can also enable or disable the default controls, but this will be reviewed in Chapter 4, Working with Controls. You can set one or more properties with the setOptions() function. You can find short explanations with comments next to the properties:
map.setOptions ({
draggable: false, //Disables the map drag
maxZoom: 12, //Sets maximum zoom level
minZoom: 5, //Sets minimum zoom level
disableDefaultUI: true, //Removes the default controls
scrollwheel: false //Disables the mouse scroll wheel
});Tip
Accessing a map object
Be aware of defining a map object as a global object in order to access it anywhere. This can be a problem in some cases while writing in JavaScript. Please check the following link to get more information on JavaScript and Scopes : http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/.