1.2 Google Maps API: Being repetitive? Create a function!

The beauty of javascript, or for that matter, any programming language, is the ability to not have to repeat the same code over and over again. You can do this by creating your own function. For example, if you were to add 10 placemarkers to your maproom, you could simply copy and paste the code to create a single marker 10 times, and just change the lat/lon values. But that would be a lot of lines of code, and frankly, entirely inefficient. Instead, consider creating a function that generates placemarkers, and all you have to do is feed it certain parameters, like the lat lon of the location.

First, let’s take a look at the code needed to create a single placemarker:

1
2
3
4
5
6
7
// First marker
var myLatlng = new google.maps.LatLng(34.0194543,-118.4911912);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Santa Monica"
});

Now imagine you have to create 2 or more placemarkers in different locations.  You could copy and paste the code above, and replace the LatLng values as well as the title parameter. You would also have to change the variable names so that you do not have the same variable declared twice:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// First marker
var myLatlng = new google.maps.LatLng(34.0194543,-118.4911912);
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Santa Monica"
});

// Second marker
var myLatlng2 = new google.maps.LatLng(34.0211224,-118.3964665);
var marker2 = new google.maps.Marker({
    position: myLatlng2,
    map: map,
    title:"Culver City"
});

Now imagine if you had to create 3, 4 or more placemarkers! That is a lot of lines of code. Instead, let’s see what it takes to create a function. For placemarkers, you need to feed it a Latitude, Longitude, and a Title. So let’s create a function that accepts these 3 parameters:

1
2
3
4
5
6
7
8
function createMarker(latitude,longitude,title){
    var markerLatLng = new google.maps.LatLng(latitude,longitude);
    var marker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        title: title
    });
}

Now let’s create the placemarkers for Santa Monica and Culver City using our new function:

1
2
3
4
5
//Santa Monica
createMarker(34.0194543,-118.4911912,'Santa Monica');

//Culver City
createMarker(34.0211224,-118.3964665,'Culver City');

That’s it! Just one line of code per placemarker. To summarize, this is what your code would look like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

<style type="text/css">
    html { height: 100% }
    body { height: 100%; margin: 0px; padding: 0px }
    #map_canvas { height: 100% }
</style>

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<script type="text/javascript">

var map;

function initialize()
{
    var latlng = new google.maps.LatLng(34.0194543,-118.4911912);
    var myOptions = {
        zoom: 12,
        center: latlng,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
   
    //Santa Monica
    createMarker(34.0194543,-118.4911912,'Santa Monica');
   
    //Culver City
    createMarker(34.0211224,-118.3964665,'Culver City');
}

//Function to create marker
function createMarker(latitude,longitude,title)
{
    var markerLatLng = new google.maps.LatLng(latitude,longitude);
    var marker = new google.maps.Marker({
        position: markerLatLng,
        map: map,
        title: title
    });
}
</script>
</head>

<body onload="initialize()">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</body>

</html>

Leave a Reply