[Google Maps API v3] Multiple static maps with Geocoding

Wed, 14 Jul 2010 08:59:41 -0700 

I have successfully created 3 static maps with a marker in each but I
have "duplicate" code. If anyone could help removing the unwanted
duplicates (geocoder for each address) I would greatly appreciate it.
\JavaScript isn't my strength.

I might have to add more addresses so would like to simply add the
address and the new map to its new canvas.

Here's my code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml";>

        <head>
                <meta http-equiv="content-type" content="text/html; 
charset=utf-8" /
>
                <title>Test Addresses</title>
                <!-- css -->
                <style>
                .map {
                        width: 250px;
                        height: 180px;
                        border: 1px solid #ccc;
                }
                </style>

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

                        var addressWpg = "1700 Ellice Ave, Winnipeg, MB";
                        var addressMtl = "1109-B Autoroute 13, Laval, QC";
                        var addressTo = "2 Lake Forest Drive, Richmond Hill, ON"

                        function initialize() {
                                geocoder = new google.maps.Geocoder();

                                // Winnipeg
                                geocoder.geocode({ 'address': addressWpg},
                                function(results, status) {
                                        
mapWpg.setCenter(results[0].geometry.location);
                                        var marker = new google.maps.Marker({
                                                map: mapWpg,
                                                position: 
results[0].geometry.location
                                        });
                                });
                                // Montreal
                                geocoder.geocode({ 'address': addressMtl},
                                function(results, status) {
                                        
mapMtl.setCenter(results[0].geometry.location);
                                        var marker = new google.maps.Marker({
                                                map: mapMtl,
                                                position: 
results[0].geometry.location
                                        });
                                });
                                // Toronto
                                geocoder.geocode({ 'address': addressTo},
                                function(results, status) {
                                        
mapTo.setCenter(results[0].geometry.location);
                                        var marker = new google.maps.Marker({
                                                map: mapTo,
                                                position: 
results[0].geometry.location
                                        });
                                });

                                var myOptions = {
                                        zoom: 15,
                                        mapTypeId: 
google.maps.MapTypeId.ROADMAP,
                                        mapTypeControl: false
                                }
                                var mapWpg = new
google.maps.Map(document.getElementById("map_canvas_wpg"), myOptions);
                                var mapMtl = new
google.maps.Map(document.getElementById("map_canvas_mtl"), myOptions);
                                var mapTo = new
google.maps.Map(document.getElementById("map_canvas_to"), myOptions);
                        }
                </script>
        </head>

        <body onload="initialize()">
                <div id="wrap">
                                        <div id="map_canvas_wpg" 
class="map"></div>
                                        <div id="map_canvas_mtl" 
class="map"></div>
                                        <div id="map_canvas_to" 
class="map"></div>
                                </div>
        </body>
</html>

-- 
You received this message because you are subscribed to the Google Groups 
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to 
[email protected].
For more options, visit this group at 
http://groups.google.com/group/google-maps-js-api-v3?hl=en.

Reply via email to