Map Source Code 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>