Before getting started, you'll need to sign up
for a Google Maps API Key. Don't forget to read
Google's Terms of Use before you agree to them! The EZ code
provided on this page is licensed under the GPL, but if
you put a EZ map on a web page, please include a link like
this: Just a map
A minimal HTML page that includes a Google Map the GMapEZ way should
look something like the below. Remember to put your own Google map
key in place of the <html xmlns:v="urn:schemas-microsoft-com:vml"> <head> <title>My GMapEZ Maps</title> <meta name="gmapkey" content="abcdefg" /> <script src="http://gmapez.n01se.net/gmapez-2.js" type="text/javascript"></script> </head> <body> <div class="GMapEZ" style="width: 300px; height: 300px;"> </div> </body> </html> You can see the results of this on the right. Note that without specifying any point, the map defaults to Fort Wayne, Indiana. To change that you'll need to add a marker or specify an extent.
The important detail above is the
From here on, all the example code will just show the
Add a marker
To add a marker on your map, go to maps.google.com, double-click on
the point you want to mark on your map and click on "Link to this
page". Note: you must double-click or drag the map, not
just search for an address. Now copy the resulting URL into a
regular <div class="GMapEZ" style="width: 300px; height: 300px;"> <a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en"> </a> </div>
If you don't see " Multiple markers
You can add multiple markers by providing multiple <div class="GMapEZ" style="width: 300px; height: 300px;"> <a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en"> </a> <a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en"> </a> <a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en"> </a> <a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en"> </a> </div> The map will be centered so that all the points you provide are visible. Unfortunately, that also means it will default to the normal street map mode. To see how to change that, read on... Changing the Map Type
To change the map type, add <div class="GMapEZ G_PHYSICAL_MAP" style="width: 300px; height: 300px;"> <a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&hl=en"> </a> </div> You can also let the user change to a different map type after the map is loaded. Just add a map type control. Lettered and colored markers
All the markers we've seen so far have used Google's default dot icon
in the default orange color. Besides <div class="GMapEZ" style="width: 300px; height: 300px;"> <a href="http://maps.google.com/maps?ll=41.092104,-85.144740&spn=0.006130,0.009795&t=k&hl=en"> A </a> <a href="http://maps.google.com/maps?ll=40.755580,-73.937988&spn=6.276505,5.552490&hl=en"> YELLOW MINI </a> <a href="http://maps.google.com/maps?ll=41.877741,-87.637939&spn=6.169597,5.552490&hl=en"> PURPLE END </a> <a href="http://maps.google.com/maps?ll=33.916013,-118.179932&spn=6.874500,5.552490&hl=en"> GREEN START </a> </div> Continue the documentation with Map Controls. |
Copyright 2012 by Chouser, all rights reserved.