Sempre stimolato da digitaladoptive , unico antidoto contro la cronica mancanza of time required to fill this blog content, this time I want to introduce newcomers to the mashup Yahoo! Maps API.
For those who have had the patience to read my post on the Google Maps API, you will realize that the methods and syntax are very similar.
The simple goal of this post is to insert a Yahoo! Map centered on a particular point on the globe, in a web page.
To start working, we need an account Yahoo! on which to request a key ("id application"). At least in the early stages, we will not need a web space: unlike the Google Maps API, the Maps API Yahoo! work on the local ie on your PC (as long as connected to the Internet, of course)
For those who have had the patience to read my post on the Google Maps API, you will realize that the methods and syntax are very similar.
The simple goal of this post is to insert a Yahoo! Map centered on a particular point on the globe, in a web page.
To start working, we need an account Yahoo! on which to request a key ("id application"). At least in the early stages, we will not need a web space: unlike the Google Maps API, the Maps API Yahoo! work on the local ie on your PC (as long as connected to the Internet, of course)
To ask for the key, as I said, you must have an account, Yahoo and go to the following page
We present the following screen where you enter some data:
Some explanations:
1. Your account will appear Yahoo! default
2. Select "Generic"
3. You can insert whatever
4. You can put whatever
5. It is not a mandatory field, but in your future reference, I suggest you enter the address of the web page where you fill in the map
6. Enter your e-mail
7. Enter a brief description
The rest do not consider it.
the next page you'll get a string of characters that will copy the code below where indicated.
The code is extensively commented, you should not have trouble understanding (but I'm here for you!)
\u0026lt;head>
\u0026lt;script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.0&appid= INSERITE_QUI_LA_YAHOO_ID_RICHIESTA_SUL_SITO"> \u0026lt;/ script>
\u0026lt;! - Definition structure page listing the map size 550x450 px //-->
\u0026lt;style type="text/css">
# spaziomappa
{width: 550px;
height: 450px;
align: center;}
\u0026lt; / style>
\u0026lt;/ head>
\u0026lt;body>
\u0026lt;div id="spaziomappa" align="center"> \u0026lt;/ div> \u0026lt;script type="text/javascript">
/ / center the map at the specified coordinates (lat, long)
var lat = 44.063889;
var long = 9.883333;
/ / definition pair of coordinates identifying the Gulf of Spezia
var point = new YGeoPoint (lat, long);
var livellozoom
= 7 / / Define the map object that will load a map in the "spaziomappa of the webpage
var map = new YMap (document.getElementById ('spaziomappa'));
/ / Add the control bar that allows three types of display:
/ / map (REG), satellite (SAT) and hybrid (HYB)
map.addTypeControl ();
/ / Add the controls to zoom
map.addZoomLong ();
/ / Set the map type, in this case hybrid, for other types of display
/ / You can use SAT (satellite) or REG ( map)
map.setMapType (YAHOO_MAP_HYB)
/ / Display the map centered at the coordinates defined by the variable 'punto'al
/ / zoom level 7
map.drawZoomAndCenter (point, livellozoom)
\u0026lt;/ script >
\u0026lt;/ body>
The result can be found here .
the next episode will try to do something more, for now I will only suggest the links to the official documentation of Yahoo! Maps API (English):
0 comments:
Post a Comment