Html Code For Google Maps - Demo

Copy and paste source code below to your HTML file or preview this demo map here.
Do not forget to sign up for your own GMAP KEY at http://www.google.com/apis/maps/signup.html and replace 'GMAPKEY' entry with generated key in the code below.

<!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" xmlns:v="urn:schemas-microsoft-com:vml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta name="title" content="MapBuilder - GoogleMap API Source Code Generator." /> <meta name="description" content="MapBuilder.net lets you tag locations on a map and publish it on your own site. Mapping is now easier than ever. It's free." /> <meta name="keywords" content="Google Maps API, PHP, AJAX, XML" /> <meta name="author" content="Andrew Bidochko. http://www.mapbuilder.net" /> <title>Personal Map - MyWorld</title> <style type="text/css"> v\:* { behavior:url(#default#VML); } #MapBuilder {font: normal small verdana, arial, helvetica, sans-serif; font-size: 10pt; margin: 0px;} #MapBuilder a {text-decoration: none; color: #0066CC; background-color: transparent;} #MapBuilder a:hover {color: #F60; background-color: transparent;} #MapBuilder h1 {font-weight: bold; font-size: 16pt; color: #369; background-color: transparent; border-bottom: 2px solid #369;} #MapBuilderIW { width: 350px; height: 200px;} #MapBuilderIWContent {height: 120px; overflow:auto;} #MapBuilderIW h1 {font-weight: bold; font-size: 12pt; color: #369; background-color: transparent; border-bottom: 2px solid #369;} #MapBuilderIWFooter {margin-top: 5px; font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 8pt; } #MapBuilderIWFooter h1 { margin: 2px 0px 4px font-weight: normal; font-size: 8pt; color: #369; background-color: transparent; border-top: 2px solid #369; border-bottom: 0px;} #MapBuilderSideBar {float:left; margin-left: 10px; } </style>  <script src="http://maps.google.com/maps?file=api&v=1&key=GMAPKEY" type="text/javascript"></script> <script src="http://www.mapbuilder.net/maps?UserName=Andrew&Map=3&SideBar=Right" type="text/javascript"></script> <script type="text/javascript"> //<![CDATA[ // Global Variables // set map variable var map = ""; //set up array of locations var aLocations = new Array; // Storage for sidebar list var listNodeContent = ""; // Create MabBuilder's "tiny" red marker icon var iconsm = new GIcon(); iconsm.image = "http://labs.google.com/ridefinder/images/mm_20_red.png"; iconsm.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png"; iconsm.iconSize = new GSize(12, 20); iconsm.shadowSize = new GSize(20, 18); iconsm.iconAnchor = new GPoint(6, 20); iconsm.infoWindowAnchor = new GPoint(5, 1); // Create MabBuilder's "big" marker icon var iconbig = new GIcon(); iconbig.image = "http://www.google.com/mapfiles/marker.png"; iconbig.shadow = "http://www.google.com/mapfiles/shadow50.png"; iconbig.iconSize = new GSize(20, 34); iconbig.shadowSize = new GSize(37, 34); iconbig.iconAnchor = new GPoint(6, 34); iconbig.infoWindowAnchor = new GPoint(5, 1); function onLoad() { map = new GMap(document.getElementById("MapBuilderMap")); MapBuilder = new MapBuilder(); map.addMapBuilder(MapBuilder); // Map type: map, satellite, hybrid map.setMapType(map.getMapTypes()[2]); map.addControl(new GLargeMapControl()); map.addControl(new GMapTypeControl()); // Center the map to the default location map.centerAndZoom(new GPoint(-20.7421875, 42.42345651793833), 14); // Add locations var point = new GPoint(-78.39466094970703, 40.46706191692021); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(0)\">Zoom To</a></h1></div>"; // Define Marker iconsm.image = "http://www.mapbuilder.net/img/icons/marker_20_red.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Altoona</h1><div id=\"MapBuilderIWContent\">Altoona. Favorite shopping place of my wife.<br />Some info about city available at <a href=\"http://www.altoonapa.gov/altoona/site/default.asp\">www.altoonapa.gov</a></div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconsm); map.addOverlay(marker); aLocations[0] = new Array(marker, "Altoona", InfoHTML, point); var point = new GPoint(33.870849609375, 44.41024041296011); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(1)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_red.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Alushta, Ukraine</h1><div id=\"MapBuilderIWContent\">We spent our Honey Moon there @ 2001. We had really great time.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[1] = new Array(marker, "Alushta, Ukraine", InfoHTML, point); var point = new GPoint(-78.33457946777344, 40.59518511581991); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(2)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_green.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Bellwood, PA</h1><div id=\"MapBuilderIWContent\">The place where I currently live. I like Pennsylvania\'s weather and nature.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[2] = new Array(marker, "Bellwood, PA", InfoHTML, point); var point = new GPoint(-77.44820594787598, 38.95366881479648); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(3)\">Zoom To</a></h1></div>"; // Define Marker iconsm.image = "http://www.mapbuilder.net/img/icons/marker_20_blue.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Dulles Airport.</h1><div id=\"MapBuilderIWContent\">Dulles International Airport. Our first entry to the US was there.<br />Hope to visit Washington DC sometime again.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconsm); map.addOverlay(marker); aLocations[3] = new Array(marker, "Dulles Airport.", InfoHTML, point); var point = new GPoint(8.134002685546875, 50.175139125143474); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(4)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_blue.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Frankfurt Airport</h1><div id=\"MapBuilderIWContent\">Meet the World.<br /><a href=\"http://www1.frankfurt-airport.com/cms/default/rubrik/3/3405.frankfurt_airport_en.htm\">http://www1.frankfurt-airport.com</a></div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[4] = new Array(marker, "Frankfurt Airport", InfoHTML, point); var point = new GPoint(-79.13683891296387, 40.58084541443101); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(5)\">Zoom To</a></h1></div>"; // Define Marker iconsm.image = "http://www.mapbuilder.net/img/icons/marker_20_orange.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Indiana, PA</h1><div id=\"MapBuilderIWContent\">Our Ukrainian friends Makovey lives in Indiana, PA. They are really cool family. <br />We like to spend weekends together drinking beer and vodka.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconsm); map.addOverlay(marker); aLocations[5] = new Array(marker, "Indiana, PA", InfoHTML, point); var point = new GPoint(24.93896484375, 49.18170338770662); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(6)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_red.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Ivano-Frankivsk</h1><div id=\"MapBuilderIWContent\">I was born and grew up in this city. I like it very much.<br />City pictures are available <a href=\"http://www.portal.if.ua/themes/city/gallery.asp?folder=1733\">there</a>.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[6] = new Array(marker, "Ivano-Frankivsk", InfoHTML, point); var point = new GPoint(-43.5498046875, 59.88893689676585); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(7)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_yellow.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Joke :)</h1><div id=\"MapBuilderIWContent\">Never\'ve been there.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[7] = new Array(marker, "Joke :)", InfoHTML, point); var point = new GPoint(30.53924560546875, 50.46712041109761); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(8)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_blue.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Kyiv</h1><div id=\"MapBuilderIWContent\">My greatest buddy \"Ronya\" lives in Kyiv. Kyiv is a capital of Ukraine.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[8] = new Array(marker, "Kyiv", InfoHTML, point); var point = new GPoint(23.9886474609375, 49.85569332253434); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(9)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_red.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Lviv</h1><div id=\"MapBuilderIWContent\">City where I gained Master in Computer Sciences and met my wife Iryna.<br />Some information about Lviv is available at <a href=\"http://www.guide.lviv.ua/\">http://www.guide.lviv.ua</a></div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[9] = new Array(marker, "Lviv", InfoHTML, point); var point = new GPoint(-79.12078857421875, 43.11802655958523); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(10)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_white.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Niagara Falls</h1><div id=\"MapBuilderIWContent\">We visited this place in March, 2005</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[10] = new Array(marker, "Niagara Falls", InfoHTML, point); var point = new GPoint(-80.22954940795898, 40.495264815909806); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(11)\">Zoom To</a></h1></div>"; // Define Marker iconsm.image = "http://www.mapbuilder.net/img/icons/marker_20_blue.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Pittsburgh Int. Airport</h1><div id=\"MapBuilderIWContent\">Pittsburgh is a nice city with population about 350,000 people. I like Pittsburgh.<br />I like shiny Pittsburgh International Airport as well. I used to flight from it. </div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconsm); map.addOverlay(marker); aLocations[11] = new Array(marker, "Pittsburgh Int. Airport", InfoHTML, point); var point = new GPoint(-79.51904296875, 43.70759350405294); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(12)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_brown.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Toronto</h1><div id=\"MapBuilderIWContent\">My friends Oleh F. and Andrew C. live in Toronto, Canada.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[12] = new Array(marker, "Toronto", InfoHTML, point); var point = new GPoint(-74.76882934570312, 40.211391988438685); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(13)\">Zoom To</a></h1></div>"; // Define Marker iconsm.image = "http://www.mapbuilder.net/img/icons/marker_20_orange.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Trenton</h1><div id=\"MapBuilderIWContent\">Trenton, USA. We visited our friends in Trenton in March, 2005. We spent nice time together.</div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconsm); map.addOverlay(marker); aLocations[13] = new Array(marker, "Trenton", InfoHTML, point); var point = new GPoint(29.608154296875, 36.19995805932895); var footerHtml = "<div id=\"MapBuilderIWFooter\"><h1><a href=\"#\" onclick=\"ZoomMapTo(14)\">Zoom To</a></h1></div>"; // Define Marker iconbig.image = "http://www.mapbuilder.net/img/icons/marker_34_yellow.png"; var InfoHTML = "<div id=\"MapBuilderIW\"><h1>Turkey</h1><div id=\"MapBuilderIWContent\"><img src=\"/pics/Andrew/Stella.jpg\" alt=\"Stella\" width=\"200\" height=\"164\" border=\"0\">I, my wife and daughter spend vacation 2004 in Chemyva, Turkey. We stayed at Stella hotel.<br /></div>" + footerHtml + "</div>"; var marker = createMarker(point, InfoHTML, iconbig); map.addOverlay(marker); aLocations[14] = new Array(marker, "Turkey", InfoHTML, point); // And finnaly create sidebar createSideBar(); // Store sidebar listNodeContent = document.getElementById("LocationList").innerHTML; } //]]> </script> </head> <body onload="onLoad()"> <div id="MapBuilder"> <h1>My Personal Map - MyWorld</h1> <p>"Where I've already been".</p> <div id="MapHolder" style="float:left;"> <div id="MapBuilderMap" style="width: 1000px; height: 600px;"></div>  Created by <a href="http://www.MapBuilder.net">MapBuilder.net</a>. </div> <div id="MapBuilderSideBar"> <div id="SideBarAction">Map Locations [<a href="#" onclick="HideLocationList()">-</a>]</div> <ul id="LocationList"></ul> </div> </div> </body> </html>