Google Maps är en väldigt bra tjänst som kan användas på vilken sajt man vill. Det kan vara extra användbart på resesajter (för t.ex. markera ut hotell och sevärdheter) eller företagwebbplatser (för att visa besökarna var butiker m.m. är belägna). I detta inlägg beskrivs hur man visar kartan samt placerar ut klickbara markörer med inforutor (pratbubblor).
<script src=”http://maps.google.com/maps?file=api&v=2&key=DIN_API_NYCKEL”
type=”text/javascript”></script>
<script type=”text/javascript”>
//<![CDATA[if (GBrowserIsCompatible()) {
// Funktionen för att skapa markören och inforutan
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, ”click”, function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// Visa kartan med några kontroller samt ställ in kriing vilka koordinater kartan ska centreras som standard
var map = new GMap2(document.getElementById(”map_canvas”))
map.setCenter(new GLatLng(53.55805, 9.97421), 13);
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
//Markörinformation
var point = new GLatLng(53.55125, 9.95770);
var marker = createMarker(point,'<div style=”width:150px: height: 25px;”><p>Text i inforutan för denna markör<\/p><\/div>’)
map.addOverlay(marker);
}
//Visa meddelande för besökare med webblösare som saknar stöd för Google Maps
else {
alert(”Sorry, the Google Maps API is not compatible with this browser”);
}
//]]>
</script>
För att smidigt hitta koordinater rekommenderar jag denna sida, där man kan flytta en markör och därefter få de aktuella koordinaterna.
En häftig sak skulle ju vara om man lät vem som helst lägga in info på en speciell plats, vet du hur det funkar?
Det borde vara ganska lätt genom att t.ex. använda ASP eller PHP. Då kan man loopa ut alla de poster man vill visa på kartan. Detta genom att ha koordinater, och information i olika kolumner i databasen.
För att generera alla markers från DB kan man göra något i den här stilen i ASP:
<%Do While Not RecSet.EOF latitud = RecSet("latitud") longitud = RecSet("longitud") rubrik = RecSet("rubrik") info = RecSet("info") %>//Markörinformation
var point = new GLatLng(<%=latitud%>, <%=longitud%>);
var marker = createMarker(point,'[div style="width:150px: height: 25px;"][H1]<%=rubrik%>[\/H1][P]<%=info%>[\/P][\/div]')
map.addOverlay(marker);
<%x=x+1 RecSet.MoveNext Loop%>
Den lite svårare nöten att knäcka är att på ett smidigt sätt låta användarna lägga till en markör. Man vill ju att användarna ska slippa skriva in koordinater, utan helt enkelt peka ut en plats på kartan och på så sätt fånga koordinaterna. Detta är nog något jag kommer ge mig på inom kort.
Gick inte så bra att skriva kod som text här så jag fick byta ut hakparenteser mot klamrar…. :(
Tusen tack för ett användbart inlägg, blev grymt glad när jag hittade den här sammanställningen!
Jag har en fråga som du kanske har koll på, är ganska ny på ämnet ser du :)
Jag har en databas med sisådär 1000 punkter som jag tänkte lägga till. Du råkar inte veta hur det funkar med vägbeskrivningar? Dvs om man klickar på en markör och inforutan kommer upp, så skulle jag vilja få vägbeskrivning som ett alternativ. Har letat förgäves i timtal :/
Tack för en riktigt bra blogg :)
/Samuel
Samuel: Tackar! Kul när man kan hjälpa till.
Jag har tyvärr ganska dålig på Google Maps API. Trots att det finns massor dokumentation om API:t så har jag inte lyckats ta till mig så mycket. Det som står i detta inlägg är i stort sett det jag kan. Återkommer med ett nytt inlägg om jag skulle lära mig något nytt om detta. Det är trots allt väldigt användbart.
Varsågod!
Okej, du har varit till stor hjälp som du har :) Tusen tack ändå! Låter finfint :)