Inserting a Google Map into iWeb and Finding the Coordinates

© ezmacwebdesign

This tutorial uses jQuery dualSlider. Its like two sliders combined where one shows the image and the other the text description.


The slider can be auto or manual and the slide transition timing can be controlled for each one. Note how the image transitions before the text and the speed is different for each.

As you can see, getting a Google map onto your website is pretty much a no brainer but wouldn't it be good to have one that's different from all the rest?


The examples on the next two pages are just touching on what you can do with the Google Maps API. Don't be frightened off by all the javascript because all that needs to be changed out is the lat/long coordinates and maybe the zoom level - not exactly rocket science!


If you know a little CSS, you can do some styling too.

Previous Pagegallery.html
Next Pagemap.html

Static Map & Street View

If you don't need the map to be interactive, this code will create a static map and you can change the coordinates, width, height, zoom level...


<img src="http://maps.googleapis.com/maps/api/staticmap?center=+32° 45' 55.21,-117° 8' 59.87&zoom=12&size=800x400&sensor=false">


This one creates the street view. Note the space (%20) between the coordinates and the direction...


<img src="http://maps.googleapis.com/maps/api/streetview?size=360x400&location=37.837378,%20-122.291994&heading=180&sensor=false">

Visit the Moscone Center using a custom Street View Panorama

Go to the next page for examples of a movable, address finding marker and a map/street view combo...

The iframe code contains a lot of stuff. You can paste it "as is" or fine tune it...


<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=apple+cupertino+ca&amp;aq=&amp;sll=37.269174,-119.306607&amp;sspn=17.283749,15.974121&amp;ie=UTF8&amp;hq=apple+cupertino+ca&amp;t=m&amp;ll=37.332221,-122.030747&amp;spn=0.017744,0.032015&amp;output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=apple+cupertino+ca&amp;aq=&amp;sll=37.269174,-119.306607&amp;sspn=17.283749,15.974121&amp;ie=UTF8&amp;hq=apple+cupertino+ca&amp;t=m&amp;ll=37.332221,-122.030747&amp;spn=0.017744,0.032015" style="color:#0000FF;text-align:left">View Larger Map</a></small>


First, you can cut out the small version to leave this....


<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=apple+cupertino+ca&amp;aq=&amp;sll=37.577784,-122.09254&amp;sspn=1.077471,0.998383&amp;ie=UTF8&amp;output=embed"></iframe>


  Now you can see the variables...


You can change height and width and add a border if required.


"q=apple+cupertino+ca" is what I typed into the search box at maps.google.com


"sll=37.577784,-122.09254&amp;"  is the lat & long for the center point (marker) of the search which you can vary for more precision.


The tutorial on this page shows you how to find this.


"sspn=1.077471,0.998383&amp;" is the approximate lat/long span for the map and can probably be left alone in most cases since all you want to do is move the marker precisely.

If you want a step by step tutorial, there's an excellent one on the Google website.