Koden nedan är i stort sett allt du behöver för att skapa en karta på din hemsida. Det enda du behöver komplettera med är en egen Google API nyckel som du kan hitta här. [Red: Sedan V3 av API krävs inte längre någon nyckel]
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=DIN_API_NYCKEL&sensor=true">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(57.666, 14.971),
zoom: 15,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
<title>En egen karta med Google Maps API</title>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>
När du fixat din API nyckel så klistrar du in den (och ersätter texten) där det står DIN_API_NYCKEL, sedan är det bara att spara som htm fil och köra i en webbläsare, och det behövs inte ens en webserver.
Vill du testa direkt så klicka på denna länk så öppnas filen på min webserver.
Sedan är det bara att ändra och bygga ut filen så att den passar ditt behov.
Håll i dig nu…
Det är nämligen precis lika enkelt att skapa en karta med API för Google Earth i 3D!
<html>
<head>
<title>Sample</title>
<script type="text/javascript" src="https://www.google.com/jsapi?key=DIN_API_NYCKEL"> </script>
<script type="text/javascript">
var ge; google.load("earth", "1");
function init() {
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance) {
ge = instance;
ge.getWindow().setVisibility(true);
}
function failureCB(errorCode) {
}
google.setOnLoadCallback(init);
</script>
<title>En egen karta med Google Earth API</title>
</head>
<body>
<div id="map3d" style="height: 100%; width: 100%;"></div>
</body>
</html>
Lägg till ditt Google API och spara som htm och öppna i en kompatibel webläsare. Även denna funktion kan du testa via min webserver på denna länk.
På Googles hemsida finns både referenser och exempel på hur du bygger på med ytterligare funktionalitet, så det är bara att sätta igång.
[EDIT]
För version 3 av Google API så behövs det inte längre någon nyckel, det är bara att stryka key=och_din_nyckel i koden. Jag har uppdaterat länkarna till en ny server som fungerar dessutom.