Devacron.com

Πως βαζουμε εναν χαρτη του GoogleMaps με στιγμα στην ιστοσελιδα μας.

admin

Ας υποθεσουμε οτι ειστε κατοχος μιας επαγγελματικης σελιδας και θελετε οι επισκετες στη σελιδα της επικοινωνιας να βλεπουν εναν χαρτη με ενα στιγμα του μαγαζιου σας. Σερφαρωντας βρηκα μια σελιδα πο&ppsilon; πραγματικα προσθετει αυτο το χαρακτηριστικο απιστευτα ευκολα και χωρις καν την γνωση κωδικα. Δεν χρειαζονται νομιζω ιδιαιτερες εξηγησεις αφου το interface ειναι πολυ απλο. Φτιαξτε το δικο σας χαρτη λοιπον εδω: http://mapmaker.donkeymagic.co.uk/ 

Για οσους ομως θελουν να βαλουν κατευθειαν ενα κωδικα στο site τους μπορουν να χρησιμοποιησουν το παρακατω:

<title>Simple Google map</title> 

<!-- //Change the following line to use your own key available from http://www.google.com/apis/maps/signup.html -->

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAARKYMX3qABRwgBGTOLfvdgBT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTmhS_LQj6knfNR9GOtLZ_JFxncNQ" type="text/javascript"></script>

<script type="text/javascript">

    var map;

    var icon0;

    var newpoints = new Array();

    function addLoadEvent(func) {

        var oldonload = window.onload;

        if (typeof window.onload != 'function') {

            window.onload = func

        } else {

            window.onload = function () {

                oldonload();

                func();

            }

        }

    }

    addLoadEvent(loadMap);

    addLoadEvent(addPoints);

    function loadMap() {

        map = new GMap2(document.getElementById("map"));

        map.addControl(new GLargeMapControl());

        map.addControl(new GMapTypeControl());

        map.setCenter(new GLatLng(53.35219076980275, -6.251220703125), 9);

        map.setMapType(G_NORMAL_MAP);

        icon0 = new GIcon();

        icon0.image = "http://www.google.com/mapfiles/marker.png";

        icon0.shadow = "http://www.google.com/mapfiles/shadow50.png";

        icon0.iconSize = new GSize(20, 34);

        icon0.shadowSize = new GSize(37, 34);

        icon0.iconAnchor = new GPoint(9, 34);

        icon0.infoWindowAnchor = new GPoint(9, 2);

        icon0.infoShadowAnchor = new GPoint(18, 25);

    }

    function addPoints() {

        newpoints[0] = new Array(53.35219076980275, -6.26220703125, icon0, 'test', 'http://google.com');

        for (var i = 0; i < newpoints.length; i++) {

            var point = new GPoint(newpoints[i][1], newpoints[i][0]);

            var popuphtml = newpoints[i][4];

            var marker = createMarker(point, newpoints[i][2], popuphtml);

            map.addOverlay(marker);

        }

    }

    function createMarker(point, icon, popuphtml) {

        var popuphtml = "<div id=\"popup\">" + popuphtml + "<\/div>";

        var marker = new GMarker(point, icon);

        GEvent.addListener(marker, "click", function () {

            marker.openInfoWindowHtml(popuphtml);

        });

        return marker;

    }

//]]>

</script>

<style type="text/css">

div#popup {

background:#EFEFEF;

border:1px solid #999999;

margin:0px;

padding:7px;

width:270px;

}

</style>

<body>

<div id="map" style="width:400px;height:250px"></div>

Αυτα που θα πρεπει να αλλαξετε αν θελησετε να χρησιμοποιησετε τον παραπανω κωδικα ειναι το Api που μπορειτε να παρετε απο την google δωρεαν, τις συντεταγμενες, το κειμενο στο μυνημα που βλεπει καποιος οταν κανει κλικ στο στιγμα και τελος τις διαστασεις του χαρτη. Για ευκολια τονισα εντονα αυτα τα σημεια του κωδικα που πρεπει να αλλαχθουν. Αν απλα το τρεξετε local θα δειτε κατι τετοιο:

Exit mobile version