Hur jag lägger till Google maps på min site | Ännu en IT-blogg :)

En liten kodsnutt jag sparar på min blogg så att den är lättåtkomlig, hoppas även andra får nytta av . Dessa kodsnuttar utgår jag ifrån när jag ska lägga upp en Google map på en sida när jag utvecklar.

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! icon smile Hur jag lägger till Google maps på min site

Tags: , , , ,

Leave a Reply

You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam Protection by WP-SpamFree