Lägg denna  script i headern för att få tillgång till Google maps API:et

DINNYCKELHÄR ska ersättas med en nyckel du får från Google maps key genom att registrera din site där. Nyckeln fungerar även om du utvecklar site lokalt på din dator.

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=DINNYCKELHÄR” type=”text/javascript”></script>

Jquery är inte helt nödvändigt men använder den för enkelhetens skull och Jquery är dessutom ett utmärkt javascript ramverk som jag inte skulle kunna leva utan. Klistra in nedanstående kod i headern

<script type=”text/javascript”
src=”//ajax.googleapis.com/ajax/libs/jquery/1.4.5/jquery.min.js”></script>

Klistra in denna i header också, eller även nånstans kring footern nära </body>

$(document).ready(function() {
if($(‘#gmap’) != undefined)
{

var lat = “<?=$latitude?>”; //Skicka in latitude
var lng = “<?=$longitude?>”; //Skicka in longitude
var map = new google.maps.Map2(document.getElementById(‘gmap’));
var point = new google.maps.LatLng(lat, lng);
map.addControl(new GSmallMapControl());
map.setCenter(point, 15);
map.addOverlay(new GMarker(point));
}
});
</script>

Lägg denna på sidan där du vill att kartan ska synas

<div id=”gmap”></div>

Lägg lite styles på din gmap diven, åtminstone bredd och höjd

Voila, klar!

Här kan ni hita Jquery tutorials