Got more questions? Find advice on: SQL | XML | Regular Expressions | Windows
Welcome to AspAdvice Sign in | Join | Help

Re: Adding Google Maps

  •  01-04-2008, 2:09 PM

    Re: Adding Google Maps

    Here is the code with arrays for multiple markers. See it in action at: http://cac.us.com/map/

    This code currently works for me with using only one marker, and it has the marker's info balloon displayed by default, and it is toggle-able by clicking the marker. This var's point values: "i1.infoWindowAnchor = new GPoint(21, 80);"  are for half the width of the marker icon, and all of its height. The same is true of the i1.iconAnchor values.

     <script type="text/javascript">
     <!--
     //<![CDATA[
     
        function createMarker(p, l, i) {
      var marker = new GMarker(p, i);
     
      // Show this marker's index in the info window when it is clicked
       if (l != '') {
        GEvent.addListener(marker, "click", function() {
         marker.openInfoWindowHtml(l);
        });
       }
      return marker;
      }
     
     function reCenter(index) {
      map.panTo(ps[index], map.getZoom());
      mrs[index].openInfoWindowHtml(ls[index]);
     }
     
        function load() { 
      if (GBrowserIsCompatible()) {
       var i1 = new GIcon();
       i1.image = "http://cac.us.com/images/map/CAC-map-marker.png";
       i1.iconSize = new GSize(43, 80);
       i1.iconAnchor = new GPoint(20, 80);
       i1.shadow = "http://cac.us.com/images/map/CAC-map-marker-shadow.png";
       i1.shadowSize = new GSize(87, 80);
       i1.infoWindowAnchor = new GPoint(21, 80);
       
       var map = new GMap2(document.getElementById("map"));
      
       map.addControl(new GLargeMapControl());
       //map.addControl(new GMapTypeControl()); // this adds the "map/satellite/hybrid" choice
      
       map.setCenter(new GLatLng(39.2841, -80.3043), 12, G_NORMAL_MAP);
     
       var marker = 0;
     
       var mrs = new Array(1);
       var ps = new Array(new GLatLng(39.3041347756603,-80.34428358078));
       var ls = new Array('<p align="left"><font face="Tahoma, Arial, Helvetica" size="2"><nobr><b>Christian Apostolic Church (UPC)</b></nobr><br /><nobr>Rt. 3, Box 303C, Clarksburg, WV 26301</nobr><br /><img border="0" src="http://cac.us.com/images/map/CAC-bldg-for-map-marker.png" width="65" height="44" align="left" hspace="0" /><nobr>(On N. 20th St at Arlington.)</nobr><br /><nobr>&nbsp;&nbsp;<a href="http://cac.us.com">cac.us.com</a> • 304.624.4459</nobr><br /><nobr>&nbsp;&nbsp;<a href="mailto:pastor@cac.us.com">pastor@cac.us.com</a> • <a href="http://cac.us.com/map/">more</a></nobr></font><font style='font-size: 1pt'><br />&nbsp;</font></p>');
       var is = new Array(i1);

       for (var i = 0; i < 1; i++) {
         mrs[i] = createMarker(ps[i], ls[i], is[i]);
         map.openInfoWindowHtml(ps[i], ls[i]);
         map.addOverlay(mrs[i]);
       }
        

      }
     }
     //]]>
     //-->
     </script>


    Sincerely,
    Doug Joseph
    Filed under: ,
View Complete Thread