M and L Adventures » Web Development http://www.mandladventures.com Leading you on the technical adventure Thu, 28 Jul 2011 21:45:14 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Google Adds YouTube-style Embedded Maps http://www.mandladventures.com/2007/08/29/google-adds-youtube-style-embedded-maps/ http://www.mandladventures.com/2007/08/29/google-adds-youtube-style-embedded-maps/#comments Wed, 29 Aug 2007 11:52:41 +0000 Matt http://www.mandladventures.com/2007/08/29/google-adds-youtube-style-embedded-maps/ Related Posts:]]> Google has finally provided the long awaited feature to easily embed maps into existing web pages. Before this feature was added, users had to have to make use of the Google Maps API which involved extensive amounts of JavaScript to embed a map on a site. Adding advanced features such as a Get Directions form or custom icons required even more JavaScript.

Therefore, over a year ago I created an extensive tutorial to ease the process for the average website creator to add a nice Google Map to their own site. This post brought quite a bit of traffic to my blog and propelled my site to be the #1 search result on Google for the search term “Google map directions tutorial.”

I’m sure this new embed feature from Google will cut down on the number of people using my tutorial, but I’m still glad to see Google release this new feature. Who knows, I may have to write another tutorial detailing how to get the most out of the embed feature. You’ll just have to wait and see.

Some people may still require the Google Maps API, but I’m not sure why they would. They would have to be doing some really complex map stuff to not be able to accomplish the same feats with embed functionality.

Below I’ve included a map I quickly created to show of this new feature.


View Larger Map.

Before I forget, you can read more about this on Google Lat Long Blog.

Related post

Related Posts:

]]> http://www.mandladventures.com/2007/08/29/google-adds-youtube-style-embedded-maps/feed/ 0 AJAX Security Considerations… http://www.mandladventures.com/2007/08/10/ajax-security-considerations/ http://www.mandladventures.com/2007/08/10/ajax-security-considerations/#comments Fri, 10 Aug 2007 12:19:50 +0000 Matt http://www.mandladventures.com/?p=244 Related Posts:]]> As many of my blog readers know AJAX is a very popular web development technology right now. AJAX offers web developers the ability to provide desktop application like functionality in web applications. Without AJAX many of the tools I use every day such as GMail, Google Reader, and Google Maps just wouldn’t be near as fun or easy to use. Don’t worry, I do occasionally use non-Google sites that make heavy use of AJAX, I just can’t think of them right now.

However, as recently reported by security researches from SPI Dynamics at the Blackhat USA 2007 security conference, the benefits of AJAX don’t come without significant security risks.

One of the main problems with AJAX is that a lot of traditional server side code is now executed on the client side. This provides would be hackers with a ton of insight on how your application functions. Once equipped with these details it is much easier for hackers to trick web applications into doing things they’re not designed to do.

The presenters at Blackhat showed the audience how a mock AJAX travel site could be tricked into selling tickets cheaper and also tricked into blocking ticket sales for the same airplane. I think these two examples show exactly how important it is for web developers to secure AJAX.

My recommendation on this subject is to not stop developing with AJAX but to take the time and effort to learn about the security problems associated with this web development technique and the ways to avoid the common pitfalls–doing so will make the web a safer place for each of us.

Just so you know where to start more about AJAX security, Darknet offers some good insight on securing AJAX by explaining some of the common ways to attack AJAX applications.

[via Ars Technica]

Related post

Related Posts:

]]> http://www.mandladventures.com/2007/08/10/ajax-security-considerations/feed/ 0 Google Maps API Tutorial http://www.mandladventures.com/2006/05/04/google-maps-api/ http://www.mandladventures.com/2006/05/04/google-maps-api/#comments Thu, 04 May 2006 14:35:58 +0000 Matt http://www.mandladventures.com/?p=41 Related Posts:]]> Before you go through all the complexities of this tutorial, I recommend that you check out a recent Google Maps development I’ve posted about. I think you’ll find it quite helpful!

In response to a post on the Godbit forum, I created this brief Google Maps API tutorial. I believe every Church website, and every business for that matter, should provide a map and directions. The Google API lets us take that concept to a new level.
After completion of this tutorial you should be able to:

  • Have your own interactive map (I guess that’s a given since that is what this tutorial is about)
    • Set the default zoom level
  • Locate your geo coordinates
  • Center your map on those coordinates
  • Place a marker on those coordinates
  • Have a custom pop-up with a form to get To Here and From Here Directions
  • Know where to go to learn more

Want to see an example before we start?
You can also see this on a site I created at Vance Auto Sales.

Special Note: Google upgraded their API on April 3, 2006. I modified this code before writing this tutorial to use the new API, so all the new version 2 features should be available if you want to add some in. Also, Google does not provide any kind of routing features in the API. So when a user types in the address to get directions, a real Google Map opens in a new window with directions to or from our location.

Step 1-Sign up for a API Key
Before you can place a map on your own site you need to sign up for a Google API Key.

To sign up, you’ll need to provide the URL of the site that will be using the key. The easiest thing to do is provide the top-level directory that will use the key (rather than the absolute address of the page that will be using the map). Doing this ensures that you’re map will work on any page of your site. For example: I provided http://www.mandladventures.com/
Leave the page with the key in it open, so you can copy and paste the key in later steps. Remember, if you’re testing this on a localhost server, and then uploading it to a production server you’ll need two separate API keys.

Step 2-Locate Your Geo Coordinates
Google doesn’t provide a geocoding service at this time, so you’ll find that on your own.
Geocoder.us is what I used.
Simply enter the address you want to find the coordinates for, and write down the latitude and longitude geocoder.us provides.
Geocoder.us is only for United States addresses. If you live somewhere else, search for free geocoders.

Step 3-Create an XML file
This XML file will store all the points you want to mark on the map. This file also provides the text that will appear when the marker is selected. In our example, we only create one marker. If you want more than one marker on the map, add more instances of the of marker in the XML code below.

<markers>
  <marker lat="35.827818" lng="-86.072576" html="&lt;b&#47;&gt;First Baptist Church&lt;&#47;b&#47;&gt; &lt;br &#47;&gt; 405 West Main Street, &lt;br &#47;&gt; Woodbury, TN 37190" label="FBC"/>
</markers>

Change lat=”35.827818″ to your address’s latitude.
Change lng=”-86.072576″ to your address’s longitude.

Replace “First Baptist Church” with the title of your location.
Change 405 West Main Street, &lt;br /&gt; Woodbury, TN 37190 to your address.
Change the label=”FBC” to whatever you want.
Save the file as map.xml, and upload it to the same directory where your map page will be. You can change the directory, but you will have to change all the references to map.xml in step 7′s code to point to a your directory.

Remember: XML requires all HTML characters to be escaped.
For your convenience, I included a list of commonly escapeed characters below:

< = &lt;
> = &gt;
/ = &#47;
] = &#93;
[ = &#91;
" = &#34;
' = &#39;

Step 4-Call the API with your key
Insert the following code in the head section of your web page, placing your API key between key= and ”

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAbTgUqmDVtw6KNosttYwutxR-kQiDMsqewHdPfI0JvuxAHQRqVhQsEF-filcfK_gQIlIUCIcFhtJH0Q" type="text/javascript"></script>

Step 5-Add an onunload event to the body tag

<body onunload="GUnload()">

Step 6-Place the div to contain the map

     <div id="map" style="width: 550px; height: 450px; border: 1px solid #000000;"></div>

	 <!--What to display if JavaScript is disabled in the user's browser-->
    <noscript><strong>JavaScript must be enabled in order for you to use Google Maps.</strong><br />
      However, it seems JavaScript is either disabled or not supported by your browser. <br />
      To view Google Maps, enable JavaScript by changing your browser options, and then
      try again.<br /><br />
    </noscript>

Insert this div, where you want to the map to appear.
Change the sytle to fit your needs.

Step 7-Insert the final bit of code
Insert this right before the /body and /html tags at the end of your web page that contains the map.

<script type="text/javascript">
    //<![CDATA[

	//the original code had a GMapSidebar to pick the markers from, I eliminated the GMapSidebar,
	//but deleting the code that referenced the bar corrupted the rest of the code
	//so just ignore references to GMapSidebar, unless you're really with JavaScript
    if (GBrowserIsCompatible()) {
      // this variable will collect the html which will eventually be placed in the GMapSidebar
      var GMapSidebar_html = "";

      // arrays to hold copies of the markers and html used by the GMapSidebar
      // because the function closure trick doesnt work there
      var gmarkers = [];
      var htmls = [];
      var i = 0;
      // arrays to hold variants of the info window html with get direction forms open
      var to_htmls = [];
      var from_htmls = [];

      // A function to create the marker and set up the event window
      function createMarker(point,name,html) {
        var marker = new GMarker(point);

        // The info window version with the "to here" form open (The Directions Form part.)
        to_htmls[i] = html + '<br>Directions: <b>To here</b> - <a href="javascript:fromhere(' + i + ')">From here</a>' +
           '<br>Start address:<form action="http://maps.google.com/maps" method="get" target="_blank">' +
           '<input type="text" size=40 maxlength=40 name="saddr" id="saddr" value="" /><br>' +
           '<input value="Get Directions" TYPE="submit">' +
           '<input type="hidden" name="daddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" +
           '"/>';
        // The info window version with the "to here" form open
        from_htmls[i] = html + '<br>Directions: <a href="javascript:tohere(' + i + ')">To here</a> - <b>From here</b>' +
           '<br>End address:<form action="http://maps.google.com/maps" method="get"" target="_blank">' +
           '<input type="text" size=40 maxlength=40 name="daddr" id="daddr" value="" /><br>' +
           '<input value="Get Directions" type="SUBMIT">' +
           '<input type="hidden" name="saddr" value="' + point.lat() + ',' + point.lng() +
                  // "(" + name + ")" +
           '"/>';
        // The inactive version of the direction info
        html = html + '<br>Directions: <a href="javascript:tohere('+i+')">To here</a> - <a href="javascript:fromhere('+i+')">From here</a>';

        GEvent.addListener(marker, "click", function() {
          marker.openInfoWindowHtml(html);
        });
        // save the info we need to use later for the GMapSidebar
        gmarkers[i] = marker;
        htmls[i] = html;
        // add a line to the GMapSidebar html
        GMapSidebar_html += '<a href="javascript:myclick(' + i + ')">' + name + '</a><br>';
        i++;
        return marker;
      }

      // This function picks up the click and opens the corresponding info window
      function myclick(i) {
        gmarkers[i].openInfoWindowHtml(htmls[i]);
      }

      // functions that open the directions forms
      function tohere(i) {
        gmarkers[i].openInfoWindowHtml(to_htmls[i]);
      }
      function fromhere(i) {
        gmarkers[i].openInfoWindowHtml(from_htmls[i]);
      }

//*******************************************************************
//Edit these options to CONFIGURE THE MAP
      // create the map
      var map = new GMap2(document.getElementById("map"));
	  //GLargeMapControl adds large zoom and pan controls on the left,
	  //you can change it by picking from two of the options described below
	  //there is a GSmallMapControl for a smaller pan/zoom control
	  //also there is GSmallZoomControl - a small zoom control (no panning controls)
      map.addControl(new GLargeMapControl());

	  //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
      map.addControl(new GMapTypeControl());

	  //this adds a scale to the bottom left of the map, delete line if you don't want it
	  map.addControl(new GScaleControl());

	  //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
	  //these Coordinates set the center of the map, they do not place the marker.
	  //that is done in the map.xml file. If you want a marker to be centered, type
	  //the same coordinates here that are used for that marker in the map.xml file
	  //0 is zoomed all the way out.
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);
//*******************************************************************

      // Read the data from map.xml
      var request = GXmlHttp.create();
      request.open("GET", "map.xml", true);
      request.onreadystatechange = function() {
        if (request.readyState == 4) {
          var xmlDoc = request.responseXML;
          // obtain the array of markers and loop through it
          var markers = xmlDoc.documentElement.getElementsByTagName("marker");

          for (var i = 0; i < markers.length; i++) {
            // obtain the attribues of each marker
            var lat = parseFloat(markers[i].getAttribute("lat"));
            var lng = parseFloat(markers[i].getAttribute("lng"));
            var point = new GLatLng(lat,lng);
            var html = markers[i].getAttribute("html");
            var label = markers[i].getAttribute("label");
            // create the marker
            var marker = createMarker(point,label,html);
            map.addOverlay(marker);
          }
          // put the assembled GMapSidebar_html contents into the GMapSidebar div
          document.getElementById("GMapSidebar").innerHTML = GMapSidebar_html;
        }
      }
      request.send(null);
    }

    else {
      alert("Sorry, the Google Maps API is not compatible with this browser");
    }

    // This Javascript is based on code provided by the
    // Blackpool Community Church Javascript Team
    // http://www.commchurch.freeserve.co.uk/
    // http://www.econym.demon.co.uk/googlemaps/
	//slight modifications by Matt from http://www.mandladventures.com/

    //]]>
    </script>

Step 8-Configure the map
Edit this section of the code above.

//*******************************************************************
//Edit these options to CONFIGURE THE MAP
      // create the map
      var map = new GMap2(document.getElementById("map"));
	  //GLargeMapControl adds large zoom and pan controls on the left,
	  //you can change it by picking to of the options described below
	  //there is a GSmallMapControl for a smaller pan/zoom control
	  //also there is GSmallZoomControl - a small zoom control (no panning controls)
      map.addControl(new GLargeMapControl());

	  //this adds the Map, Satellite, and Hybrid buttons, delete line if you don't want it
      map.addControl(new GMapTypeControl());

	  //this adds a scale to the bottom left of the map, delete line if you don't want it
	  map.addControl(new GScaleControl());

	  //type in the Geo Coordinates and default zoom level below. (Latitude, Longitude), Zoom level);
	  //these Coordinates set the center of the map, they do not place the marker.
	  //that is done in the map.xml file. If you want a marker to be centered, type
	  //the same coordinates here that are used for that marker in the map.xml file
	  //0 is zoomed all the way out.
      map.setCenter(new GLatLng(35.827818,-86.072576), 12);
//*******************************************************************

Set the default map center point, and the zoom level.
Change 35.827818 to your latitude
Change -86.072576 to your longitude.
Change 12 to your desired zoom level. 0 is zoomed all the way out.
To delete a control, remove the line of code.
You can change the types of controls used on the map.
For example, some controls can be smaller or bigger, which is useful if you have a small map. I included the alternative control names in the source code comments. For example change GLargeMapControl to GSmallMapControl.

Step 9-Tutorial Complete
Enjoy!


Download the Source Code used in this tutorial.

To learn more check out these resources:

Big Thanks goes to: