Static google map creator

30 ביולי 2013

תגיות: , , , , , ,
תגובה אחת

חבר טוב שלי בקש שאצור לו דף html פשוט המאפשר להכניס קצת הגדרות עבור google maps ולקבל תמונה סטטית של המפה.

כל הקוד נמצא כאן.

הדף יראה כך:

image

המשתמש יכניס כתובת, יגדיר את ההגדרות וילחץ על צור מפה, התוצאה תהיה התמונה שאנחנו רואים.

בלינק להורדת קוד המקור תוכלו לראות את קוד ה – html, כאן נראה את הקוד שרץ בזמן לחיצה. (הקוד מתבסס על jquery, ועל ספרייה המאפשרת קוד בסגנון string.format וכמובן הסקריפט של גוגל)

Code Snippet
<script src="jquery-1.5.1.js"></script>
<script src="string.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Code Snippet
function createMap() {
    var jsonURL = 'http://maps.google.com/maps/api/geocode/json?address=' + $('#txtAddress').val() + '&sensor=false';

    $.getJSON(jsonURL, function (res) {
        var loc = res.results[0].geometry.location;
        loc = loc.lat + ',' + loc.lng;

        var url = 'http://maps.googleapis.com/maps/api/staticmap';
        var srcString =
        String.format("{0}?center={1}&zoom={2}&sensor=false&size={3}x{4}&language={5}&maptype={6}&markers=color:{7}|label:S|{1}",
                    url,
                    loc,
                    $('#intZoom').val(),
                    $('#txtWidth').val(),
                    $('#txtHeight').val(),
                    $('#txtLang').val(),
                    $('#txtType').val(),
                    $('#txtColor').val());

        $('#img').attr('src', srcString);
    });
}

ראשית נפנה לגוגל בפניית ajax עם הכתובת המבוקשת, התוצאה תהיה אובייקט json עם הרבה מאוד מידע (פחות רלוונטי למה שצריך בדוגמא הזו).

בשלב הבא נוציא למשתנה בשם loc את המספרים המציינים את המיקום המעניין אותנו.

לאחר מכן נבנה מחרוזת המייצגת את הכתובת לתמונה וניתן אותה כפרמטר לתמונה.

 

הוסף תגובה
facebook linkedin twitter email

כתיבת תגובה

האימייל לא יוצג באתר. שדות החובה מסומנים *

תגובה אחת

  1. שמואל6 באוגוסט 2013 ב 9:38

    יישר כח , נקי ומסודר !!

    הגב