How to insert a map in your blog http://google-mapping.blogspot.com/index.html
http://code.google.com/intl/it/apis/earth/
http://koti.mbnet.fi/ojalesa/tutor/maphowtoblogger.html
How to insert a map in your blog
An unofficial tutorial by
Esa.
Not officially authorised or approved by Google® or Blogger®. Tested in real world applications.
By following these basic instructions you can publish a Google Map of the location you like in your blog. It can be done in a post or sidebar. With no programming experience. If you can set links in your blog you can set a map as well. See examples with
sidebar map
or one with posted map. What are you going to display? Following parameters should be chosen before you start editing the source code:
center coordinates (lng,lat)
zoom setting 0...17 
dimensions of the map (width, height) in pixels
map type(map/satellite/hybrid) You can also set: map type buttons or not
zoom slider or small control buttons
find the location quickest by dragging the left map
decide the size
find the zoom
write down the coordinates
-
Get the Google Maps API key -
-
Open the template of your blog -
Sign in to your blog. Select the 'Template' tab and you can see the html source code of your blog.The top of the code looks like this: - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>My personal blog</title>
Copy/paste the following code just below the tag -
- <script src="http://maps.google.com/maps?file=api&v=1&key=YourGoogleMapsAPIKey" type="text/javascript"></script>
Replace "YourGoogleMapsAPIKey" on the second line - with the key
you received from Google. Now your source code should look like this: - <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://maps.google.com/maps?file=api&v=1&key=ABQIAAAAYxpy0HiKBWXiyhVrpVqkshRQ4cSWSDIG-IxrQCMGUWYgFGo6tRTSm0D-5pPBLuCQ0od7cPLu6d4nBQ" type="text/javascript"></script> <title>My personal blog</title>
-
Go to the end of html source code -
Locate the point just above
Insert the following code
- <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.setMapType(G_MAP_TYPE) ; map.centerAndZoom(new GPoint(-72.585, 42.102), 2); //]]> </script>
Edit the parameters of the code
-
map.centerAndZoom(new GPoint(-72.585, 42.102), 2);
- Replace (-72.585, 42.102) with your center coordinates (longitude, latitude) comma separated and in decimal form. Replace 2 by your zoom level.
Set the map type of your choice in: map.setMapType(G_MAP_TYPE) ;
-
Select (G_MAP_TYPE), (G_SATELLITE_TYPE) or (G_HYBRID_TYPE) map.addControl(new GSmallMapControl());
- but small controls are stylish for a blog.
- Place the map in the blog sidebar
Insert the following code to the template source code in the position of your choice: Edit the width and height to your taste. Save and close the template.
- Or place the map in a post
Create a new post. There are two modes in the Posting Create page. Compose and Edit Html. You can write your text in Compose mode but select Edit Html mode when you insert the following code: The code should look like:
- <script type="text/javascript"> //<![CDATA[ var map = new GMap(document.getElementById("map")); map.addControl(new GSmallMapControl()); map.setMapType(G_MAP_TYPE) ; map.centerAndZoom(new GPoint(-72.585, 42.102), 2); var point = new GPoint(-72.587, 42.1); var marker = new GMarker(point); map.addOverlay(marker); //]]> </script>
Duplicate those three lines as many times as you like.
-
Edit the coordinates Publish
-
kartta latautuu... Usually everything goes right the first time.
You can find many more features and possibilities by reading . Some JavaScript knowledge is needed.
- Feel free to link us
Did you find this tutorial useful? If so, please put a link in your blog.
Map in your blog tutorial
Design aid page
-
Use Google Maps - Part
- Wednesday, August 30, 2006
-
(
- 11 votes, average: 4.55
)
- Loading ...
Since many dogs and pigs (including me) you are at ease, now let's see, usually starting from the principle of "Why can not I use
(random stuff)
Fichissima in my Web Application?" mentioned here, how can we use the power of Google Maps, creating from scratch a map where you can insert markers at will.
Markers position them properly (according to the city you can even specify the number of the way) thanks to Google Maps geocoder. Each marker will contain a short descriptive text.
For this tutorial we will use the version 2 API
, which includes a handy geocoder. We also need a handful of
PHP and a MySQL database
that will contain the coordinates and descriptive text of each marker.
If we really want to make cool make all your entries via AJAX, JavaScript generated on the fly, which he places markers on the page without refreshing it. But yes, we're cool, let's do it. The project (in my case) the name of
NapoMaps
to customize it a little call it
quellochevipare
trite, but it has to start somewhere. "And you go!" In the words of the good old days J. Article 31 of the AX. Yes
Ps 
Everything will be valid XHTML 1.0 Strict . Just to complicate a little 'life. This is not for the faint of heart.
GET A GOOGLE MAPS API KEY
order to use Google Maps in your website you need to get a Google Maps API Key,
may proceed directly to Google. The key is for an entire directory on a domain: if the request for dominio.ext will not apply to
dominio.ext / directory / and vice versa. So sappiatevi regular or recovered more keys for each subfolder the domain that you use. The keys are
free. The only limit is the hour for the geocoder requests (translates addresses in LAT - LONG), introduced by version 2 of the API. 50,000 requests / hour days (thanks to Epper), however, should be enough to anyone wishing to provide professional service. SET YOUR HOME
Google offers example of how it should be a page with a Google Maps. Copy it with impunity, remembering to insert your key. Align the center of the map page, and decorated a bit 'page. Also the eye wants its part.
THE CENTRE MAP function load ()
that you copied from Google to create a map in the "DIV" which has the id "map". The code is not complicated, peek into the source of the example that you will find links at the end This first part should be easily understandable.
We want to center the paper on Italy, then use the
map.setCenter ()
that takes two parameters: A point on the map
The zoom level The point is created using the function
GLatLng ( ) which in turn accepts two parameters:
latitude and longitude point, in decimal format. To recover the details of your favorite city used websites such as Maporama . In the case of Rome, the coordinates are: 41.90
, 12:49 .
The function to be written, setting a zoom level of 5 will be: map.setCenter (new GLatLng (41.90, 12.49), 5); CONTROLS Ok, we hit and we can navigate the map with the mouse ... How do we see the controls? Nothing could be easier.
map.addControl (new GMapTypeControl ());
Activate control that allows you to select the satellite map, hybrid or road only.
map.addControl (new GLargeMapControl ());
Activate zoom control and navigation ... The classic left bar For other controls, refer to the official documentation
and the next parts of this tutorial.
THE POP-UP -
Through the function: -
map.openInfoWindow (map.getCenter (), document.createTextNode ("Rome !"));
Create pop-up on the center of the map, with text" Rome! " map.getCenter ()
returns the coordinates of the center point of the map. CONCLUSIONS With a dozen lines of JavaScript code we created our first map, using Google Maps API. This first part of the tutorial is deliberately simple and "verbose" so that it can be easy to understand. As we proceed in this tutorial (there are at least 3-4 other parties, maybe more), on issues as diverse as the interface to the database, the placement of markers, etc ...
is what you should be able to do today: the first part .
code as usual, is well commented and easy to read. However, for any questions, concerns or comments please leave a note, are always welcome.
The tutorial will be available in PDF format just completed, will include all changes and suggestions received. Use Google Maps - Part
Sunday, September 10 2006
(
7 votes, average: 4.86
) Loading ...
As promised here we are again for the second part of the tutorial on Google Maps. The first part of the tutorial is available at this address
.
Today we will learn to use the geocoder, moving on a map based on the address entered, and displaying a marker. Clicking on the marker opens a pop-up with the address searched.
DEFINITION
geocoding Geocoding is said
the proceedings which are transformed into geographical coordinates (Latitude and Longitude usually), addresses such as "street, House, City." Geocoding is a very interesting overview of the available Wikipedia
.
the geocoder of Google Maps Geocoder
There are many, free or not, and Google, the second version of the Google Maps API has a built-in geocoder, which accepts 50,000 requests per day, about 1.6 per second, per API key used .
Obviously not all of the planet is covered by the geocoder, the U.S., as one might imagine, I was more covered. In Italy's case we are lucky enough, but there is still some formatting error addresses correctly.
ACTIVATE Geocoder To use the Google Maps Geocoder must activate it. To do this, we create a new variable named geocoder, within the script for the first part of the tutorial. After that we create the geocoder, assigning it to the newly allocated variable within the function
load ()
the function that creates the map.
/ / Create Geocoder Max 1.6 queries / sec
geocoder = new ()
;
Nothing could be easier. Now we must create the function that queries the geocoder. A geocoder that there do not encode anything
function
showAddress (
address) {
geocoder.
getLatLng
(
address,
function
(
point
)
{if
(! Point )
{/ / Address not found!
alert (address + "not found!"
) ;}
else {
/ / Address found, centers the map on the point
map. setCenter
( point, 14) ;
/ / Create the map marker
. addOverlay
( createMarker ( point, address ) ) ;
}}
)
;}
Now we are ready, and our geocoder is ready too. What have we done? In the first script we created the object GClientGeocoder, the API documentation describes it much better than I do know at this address
. showAddress function () instead question deals with the geocoder, through JavaScript. I recommend to always the possibility that the geocoder can not find the address searched, very often for countries other than the United States. In this case a alert () warns of the error. If the address is found, the map is moved about by using the method map.setCenter () . If you do not have to zoom in on the map you can also use the method
panto ()
. will then create a marker. Al-click on the marker opens a pop-up containing the address searched. The function that creates the marker,
createMarker () receives the item returned by the geocoder and creates the pop-up click on the marker. The pop-up will contain the address searched, but could contain any HTML . doing so, for every query will be placed a marker. If we succeed in having 100 markers on the map (100 searches without refresh the page), a simple click will return the exact address for each marker. Just try it. / / Create the marker with the label passed as a parameter function
createMarker ( point, label
)
{/ / Variable marker
var marker = new
GMarker (
point )
;
/ / Create listener for the click on the object
GEvent.
addListener ( marker
"click" ,
function
( ) {
marker. openInfoWindowHtml (
label ) ;}
)
; return marker;} FORM
Now that we've done everything we need to go to showAddress () the string that contains the address to "translate". A simple form is for ours. There will be a page receives the information, then submit the ()
module will return a false value. There will also be used later. CONCLUSIONS Here we are: At this point you should have gotten a GoogleMaps via a form that allows you to be able to search for an address: second part. Try the query type " Milan, Italy ", " Palermo, Italy ", " Via L. da Vinci, Seregno, Milan, Italy ", etc ... code as usual, is well commented and easy to read. However, for any questions, concerns or comments please leave a note, are always welcome.
The tutorial will be available in formats PDF just completed, will include all changes and suggestions received. Use Google Maps - Part Three Sunday, October 1, 2006
(
8 votes, average: 4.13 )
Loading ... Here we are. Before you begin, to those who had not yet done so, I suggest you read the first two parts of this tutorial.
Use Google Maps - Part Use Google Maps - Part
Now at last we will see as the geocoder can interact with a MySQL database using AJAX and PHP.
Thanks to the database you can use Google Maps by entering coordinates or addresses that will be replicated at each subsequent visit the page, then, unlike what happened in the second part of this tutorial, the data is not lost.
The previous sentence is difficult to interpret, I know. `id` bigint
(20
) UNSIGNED
NOT NULL AUTO_INCREMENT
, `latitude` float
NOT NULL DEFAULT
'0 '
,
`longitude` float NOT NULL DEFAULT
'0 ', `address` text NOT NULL, PRIMARY KEY (`id`
) ) ; The newly created table will contain details of points calculated by the geocoder and the address we just tried. E 'can change, and therefore modify the search form, to contain descriptive text, links to images, etc. ... To you full freedom of use. The page will work this way: We will address
If found by the geocoder we will be asked to save the database through an AJAX request will go to a dot searched the database using a simple PHP file will add a marker to the map After that, each visit, a small piece of PHP code will: Make a query on the table "points"
Print the Javascript code that will create a marker for each row of the table That's it. Try the ' example, you will find some markers already in place. One of these relies on Piazza Venezia in Rome. You can add markers to your liking, will be replicated at each new visit. IN DETAIL
Let's see in detail how a placement. Building upon the second part of this tutorial we created a page that allows you to search through the built-in Google Maps Geocoder any Italian address. If I remember correctly the function provided for two options: address not found and the address found. If the address was found by the geocoder was added to a marker on the map. Now, in addition add a marker also perform an AJAX call to the file " inserisci.php " which are not in the code: you need to know that is done only an insert query with 3 parameters (latitude, longitude, address searching) passed away GET. function that makes the AJAX call is a classic: the are very well explained in this address. I just renamed ajax () and added a couple of parameters for your convenience. Of course you can use your favorite AJAX framework, without any limitation. showAddress The function code () becomes:
function
showAddress
(-
address) -
-
- {geocoder.
getLatLng
(
point
) {if (! Point
)
{/ / Address not found
alert ( address + "not found!"
) ;}
else
{/ / call ajax for inclusion in the DB if it is confirmed ...
if
( confirm ( "Want to put a marker for the address: n" + address
)
)
{/ / Center the map . setCenter (
point,
10) ;
/ / Create the map marker .
addOverlay (
createMarker ( point, address ) ) ; / / AJAX call to insert ajax ( "inserisci.php? Lat =" + point.
x + "& long =" +
point. y +
"& Address =" + address , "void" ) ;
}}}
) ;} The insertion of the marker in the database is done without refresh the page through AJAX. "Void" refers to a hidden div because the function ajax () also requires a div that contains the results then, although in this case is unused.
As usual there is nothing to explain, the code is explained almost single-handedly. Andatevelo watching. PRINTING MARKER
Chapter deserves the printing of each marker time you call the page containing the map. The trick is to use PHP code to print JS, extrapolating the data points and creating on the fly ... If I have not explained the PHP code you will understand by himself: / / Print query JS after ... $ connection = mysql_connect ( "YOUR SERVER" ,
"YOUR USERNAME" , "YOUR PASSWORD"
) ;
mysql_select_db ( " YOUR DB "
) ;
$ sql =" SELECT DISTINCT * FROM points "
;
$ result = mysql_query
( $ sql, $ connection ) or die ($ sql
. ". mysql_error (
)
) ;
/ / prints all the dots with pop-up address. while ( $ row = mysql_fetch_assoc ($ result ) ) { echo "point = new GLatLng ({$ row ['longitude "]},{$ row [' latitude "]}); n" ;
echo "map. addOverlay (createMarker (point, '". addslashes ($ row [ " address " ] ) .
"')); n" ;
} As you know (you know it?) PHP code is executed by the server before sending the page to the browser that will then execute the JavaScript code. Then generate the PHP code JS something quite sexy as well as legal and helpful. CONCLUSIONS You are now ready to create your own mashups (as precise as you want) of Google Maps. I am opposed to regurgitate, then the code you saw in these three episodes, though functional, it should be built, reviewed and possibly improved. still remain available to those who wish to know more about Google Maps is via blogs via MSN or Gtalk. Have fun and do not forget that: The process of Preparing programs for a digital computer is Especially attractive, Not Only Because It Can Be Economically and scientifically rewarding, But Also Because It Can Be an Aesthetic experience much like composing poetry or music.
Donald Knuth UPDATE Luke asks me how to sail directly to an address map loading ... That's it ! Viewing the code load function ()...
To open the link in a popup, but the syntax is as follows: 
whom I thank for having been helpful 
Step 2 - CSS code to define the appearance of links to 
Prepare the design of your map. 
Everything will be valid XHTML 1.0 Strict 
; 
CREATE TABLE `paragraphs`