CPL's iOS Resources: Creating embedded code (iFrames) for custom maps

Wednesday, March 27, 2013

Creating embedded code (iFrames) for custom maps

This is a description including code snippets of how to create embed code for other people to insert into their web pages. It is based on the work we are doing with GPSVisualizer, but can be used to embed an URL that is available to an online server (like our SCNewspaperTaxi website, or a file with a URL on our Google Drive).

This is the FAQ for GPPSVisualizer:

By far the easiest solution is to put the map in an "inline frame" using the <IFRAME> tag. This creates a "window" in your page into which you can load another file (more info about IFRAMEs). The advantage of doing this is that the DIVs and margins and styles and whatnot will be completely isolated from the rest of the structure of your page; also, you don't have to edit the attributes of the <BODY> or <HTML> tags, which you would have to do if you tried to merge the GPS Visualizer code into your Web page. (The only disadvantage, and one which would only affect "power users," is that if you want to create objects that interact with the map -- for instance, a list of waypoints, or a control that will re-center the map -- those cannot be outside the IFRAME.)

Another advantage to IFRAMEs (as opposed to cutting and pasting bits of HTML into your page) is that you can place as many of them on your page as you want; because they are isolated from each other, there shouldn't be any conflicts even if all the maps have identically named parts.

Here's a sample <IFRAME> tag; the anchor in the middle will only be displayed if the browser does not support inline frames:

<a href="my_map.html">Click here for the map</a>

</iframe>

Here’s an example from a Google Maps embed code:

</iframe>

<br /><small>View <a href="https://maps.google.com/maps/ms?msa=0&msid=204112771159932432535.0004d6a3eb52759422f2e&hl=en&ie=UTF8&ll=36.987644,-121.759922&spn=0.271253,0.722587&t=m&iwloc=0004d6a410726c0cee96f&source=embed" style="color:#0000FF;text-align:left">Santa Cruz Beer Map </a> in a larger map</small>

demo map URL saved in SCNewspaperTaxic.com

http://santacruznewspapertaxi.com/wp-content/uploads/2013/03/xxxxDistributionGeocoded04.html

Here’s the code for our 1st iFrame (hopefully):

<a href="http://santacruznewspapertaxi.com/wp-content/uploads/2013/03/xxxxxxDistributionGeocoded04.html">Click here for the map</a>

</iframe>

CPL's iOS Resources

Try the search, it's linked to some great forums

Wednesday, March 27, 2013

Creating embedded code (iFrames) for custom maps

Great iOS Linkage

Followers