The version 3 of Google Maps did away with having to get an API key in order to access the Google Maps API. Here is a simplified version of the code I wrote, it basically allows you to add markers to Google Maps and displays a popup window when the marker is clicked. The map is displayed inside an HTML div (with id = “map”). At the very start of the code, I created an icon object that will be used as our marker and a map object with several parameters to set the controls and display of the map. Coordinates are in latitude and longitude and these are stored in a LatLng object. Then I pass in the LatLng, icon and map objects to the marker constructor. There is only one popup window at any one time and the code tracks which one opens and closes the previous one. Multiple coordinates are passed to LatLngBounds objects so that the center can be computed and used in centering the markers in the map when displayed onscreen. 

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Google Maps</title>
        <style type="text/css">
            body { font: normal 10pt Helvetica, Arial; }
            #map { width: 100%; height: 100%; border: 0px; padding: 0px; }
        </style>
        <script src="http://maps.google.com/maps/api/js?v=3&sensor=false" type="text/javascript"></script>
        <script type="text/javascript">
            //Sample code written by August Li 
            var icon = new google.maps.MarkerImage("http://maps.google.com/mapfiles/ms/micons/blue.png", 
                       new google.maps.Size(32, 32), new google.maps.Point(0, 0), 
                       new google.maps.Point(16, 32));
            var center = null;
            var map = null;
            var currentPopup;
            var bounds = new google.maps.LatLngBounds();
            function addMarker(lat, lng, info) {
                var pt = new google.maps.LatLng(lat, lng);
                bounds.extend(pt);
                var marker = new google.maps.Marker({
                    position: pt,
                    icon: icon,
                    map: map
                });
                var popup = new google.maps.InfoWindow({
                    content: info,
                    maxWidth: 300
                });
                google.maps.event.addListener(marker, "click", function() {
                    if (currentPopup != null) {
                        currentPopup.close();
                        currentPopup = null;
                    }
                    popup.open(map, marker);
                    currentPopup = popup;
                });
                google.maps.event.addListener(popup, "closeclick", function() {
                    map.panTo(center);
                    currentPopup = null;
                });
            }            
            function initMap() {
                map = new google.maps.Map(document.getElementById("map"), {
                    center: new google.maps.LatLng(0, 0),
                    zoom: 14,
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: true,
                    mapTypeControlOptions: {
                        style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR
                    },
                    navigationControl: true,
                    navigationControlOptions: {
                        style: google.maps.NavigationControlStyle.ZOOM_PAN
                    }
                });
                //add marker on given coordinates
                addMarker(14.65194, 121.06573,
                          '<b>University of the Philippines</b><br/>Philippines');
                addMarker(14.65105, 121.04931,
                          '<b>Quezon Memorial Circle</b><br/>Philippines');
                center = bounds.getCenter();
                map.fitBounds(bounds);
                map.setZoom(map.getZoom - 1);
            }
        </script>
    </head>
    <body onload="initMap()" style="margin:0px; border:0px; padding:0px;">
        <div id="map"></div>
    </body>
</html>

Advertisement

javascript, programming

, ,

August 1, 2010

10 Comments