как разместить результаты JSON на Google Maps?

У меня есть результаты JSON, показанные ниже, которые я вытащил из своей базы данных. Я хочу отобразить это на картах Google с помощью маркера, который отображается в зависимости от положения, вот результаты;

{
    "user": [{
        "name" : "xxxxxxxxx",
        "posn" : [53.491314, -2.249451]
    }, {
        "name" : "xxxxxxxxxx",
        "posn" : [54.949231, -1.620483]
    }]
}

Как мне получить имя пользователя и положение, размещенное на картах Google? Кодирование для моих googlemaps ниже;

<div id="map_canvas" style="width:800px; height:600px;"></div>

    <script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script src="/Scripts/markermanager.js" type="text/javascript"></script>
    <script src="/Scripts/google_northamerica_offices.js" type="text/javascript"></script>  

    <script type="text/javascript">

        var map;
        var bounds = new google.maps.LatLngBounds();
        var mgr;

        function initialize() {
            var myOptions = {
                zoom: 4,
                center: new google.maps.LatLng(-34.397, 150.644),
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            mgr = new MarkerManager(map);
            google.maps.event.addListener(mgr, 'loaded', function () {
                for (var i = 0; i < 10; i++) {
                    var latlng = new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180);
                    bounds.extend(latlng);
                    var marker = new google.maps.Marker({
                        position: latlng,
                        // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
                        title: "RedStar Creative Marker #" + i
                    });
                    mgr.addMarker(marker, 0);
                }
                mgr.refresh();

                map.fitBounds(bounds);
            });
        }
        $(document).ready(function () {
            initialize();
        });

    </script>

я пытался сделать это так, не знаю, правильно ли это сделать, впервые используя JSON;

    function setupUserMarkers() {
        var markers = [];
        for (var j in layer["users"]) {
            var place = layer["users"][j];
            var title = place["name"];
            var posn = new GLatLng(place["posn"][0], place["posn"][1]);
            var marker = createMarker(posn,title); 
            markers.push(marker);
            allmarkers.push(marker);
        }
        mgr.addMarkers(markers, layer["zoom"][0], layer["zoom"][1]);
    }
    mgr.refresh();
}

ОБНОВЛЕНИЕ: с помощью AJAX я смог добавить два маркера на основе результата JSON, пытаясь выяснить, как добавить всплывающее окно, чтобы оно отображало изображение этого человека в окне. я знаю, что мне понадобится google.maps.event.addListener, а в следующий раз я должен изучить его сейчас, надеюсь, приведенный ниже AJAX поможет другим, которые столкнутся с похожей проблемой.

$.ajax({
                    url: "/Home/GetUser",
                    context: document.body,
                    success: function (data) {
                        for (var i = 0; i < data.user.length; i++) {
                            var label = data.user[i].name;
                            var lat = data.user[i].posn[0];
                            var long = data.user[i].posn[1];

                            var latlng = new google.maps.LatLng(lat, long);
                            bounds.extend(latlng);
                            var marker = new google.maps.Marker({
                                position: latlng,
                                title: label
                            });

person MJCoder    schedule 20.10.2011    source источник
comment
Есть ли общедоступный URL-адрес для JSON? Если это так, я могу настроить демонстрацию на jsFiddle.   -  person Salman A    schedule 21.10.2011
comment
@Salman, извините, нет общедоступной ссылки, так как я работаю на локальном хосте, используя Visual Web Dev. хотя есть URL для изображения профиля facebook.   -  person MJCoder    schedule 21.10.2011


Ответы (2)


В основе приведенного выше примера кода 10 циклов, добавляющих случайные точки - вам нужно заменить это циклом по вашим точкам.

Конкретно этот бит:

       // loop over your points
           for (var i = 0; i < 10; i++) {
                // use your points lat/lng
                var latlng = new google.maps.LatLng(Math.random() * 180 - 90, Math.random() * 360 - 180);
                bounds.extend(latlng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
                    // use your points name
                    title: "RedStar Creative Marker #" + i
                });
                mgr.addMarker(marker, 0);
            }

Вот непроверенный первый раз, никаких гарантий, бла-бла-бла :)

       // loop over your points
       for (var j in layer["users"]) {
                var place = layer["users"][j];
                // use your points lat/lng
                var latlng = new google.maps.LatLng(place["posn"][0], place["posn"][1]);
                bounds.extend(latlng);
                var marker = new google.maps.Marker({
                    position: latlng,
                    // animation: google.maps.Animation.DROP, // animation disabled because it slows down performance
                    // use your points name
                    title: place["name"]
                });
                mgr.addMarker(marker, 0);
            }
person Chris Kimpton    schedule 20.10.2011
comment
я использовал AJAX, и он выполняет свою работу за меня, показывает маркер для 2 пользователей на основе созданного JSON. Но по какой-то причине карта загружается за пределами Австралии. - person MJCoder; 20.10.2011
comment
вы можете взглянуть на AJAX, который я сделал, чтобы разместить два маркера на карте на основе позиции из JSON. Я очень впечатлен собой, но без вашей помощи и других здесь я не смог бы научиться достаточно быстро :) - person MJCoder; 20.10.2011

это мой результат JSON, я хочу, чтобы это изображение отображалось в информационном окне на картах Google, когда пользователь нажимает на маркер

image":"http://graph.facebook.com/10000090226****/picture?type=large"

вот часть кода для карт гугла

<script type="text/javascript">

    var map;
    var bounds = new google.maps.LatLngBounds();
    var mgr;

    function initialize() {
        var myOptions = {
            zoom: 2,
            center: new google.maps.LatLng(53.491314, -2.249451),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        mgr = new MarkerManager(map);
        google.maps.event.addListener(mgr, 'loaded', function () {
            $.ajax({
                url: "/Home/GetUser",
                context: document.body,
                success: function (data) {
                    for (var i = 0; i < data.user.length; i++) {
                        var label = data.user[i].name;
                        var lat = data.user[i].posn[0];
                        var long = data.user[i].posn[1];

                        var latlng = new google.maps.LatLng(lat, long);
                        bounds.extend(latlng);
                        var marker = new google.maps.Marker({
                            position: latlng,
                            title: label
                        });

                        mgr.addMarker(marker, 0);

                    }
                    //adding google maps window popup...
                    var infowindow = new google.maps.InfoWindow();
                    google.maps.event.addListener(marker, 'click', function () {
                        infowindow.open(map, marker);
                    });
                }

            });

            mgr.refresh();

            map.fitBounds(bounds);
        });
    }
    $(document).ready(function () {
        initialize();
    });

    </script>

на данный момент окно не открывается, оно даже не откроется, если внутри него нет содержимого? немного смущен при попытке получить изображение внутри окна содержимого. Мне придется продолжать копаться и посмотреть, смогу ли я получить там URL-адрес изображения.

Должен ли бит всплывающего окна добавления появляться после обновления маркеров?

ОБНОВЛЕНИЕ решило проблему, добавлял фрагменты кода в неправильных местах, нуждался в некоторой настройке. Сейчас происходит то, что когда вы щелкаете по первому маркеру, открывается информационное окно для второго маркера и отображается имя, но первый маркер, который был первоначально нажат, не открывает информационное окно.

function initialize() {
        var myOptions = {
            zoom: 10,
            center: new google.maps.LatLng(0, 0),
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        mgr = new MarkerManager(map);
        google.maps.event.addListener(mgr, 'loaded', function () {

            $.ajax({
                url: "/Home/GetUser",
                context: document.body,
                success: function (data) {
                    for (var i = 0; i < data.user.length; i++) {
                        var label = data.user[i].name;
                        var lat = data.user[i].posn[0];
                        var long = data.user[i].posn[1];

                        var latlng = new google.maps.LatLng(lat, long);

                        bounds.extend(latlng);
                        map.fitBounds(bounds);

                        var marker = new google.maps.Marker({
                            position: latlng,
                            title: label
                        });

                        var infowindow = new google.maps.InfoWindow({ content: data.user[i].name });
                        google.maps.event.addListener(marker, 'click', function () {
                            infowindow.open(map, marker);
                        });

                        mgr.addMarker(marker, 1);

ПОСЛЕДНЕЕ ОБНОВЛЕНИЕ: верно, я могу перестать паниковать, мне удалось заставить его работать после того, как я шлепнул себя, чтобы проснуться и прочитать что-то более 3 раз :)

person MJCoder    schedule 21.10.2011
comment
Пожалуйста, обновите свой вопрос, чтобы добавить детали, а не публиковать в качестве ответа. - person Salman A; 21.10.2011
comment
неважно, у меня все заработало, я добавлял маркер bounds.extend и info в неправильных местах. Теперь работает нормально. Вопрос обновлен - person MJCoder; 21.10.2011
comment
@SalmanA, когда я нажимаю на первый маркер, он открывает информационное окно для второго маркера и отображает имя, но первый маркер, который был первоначально нажат, не открывает информационное окно. - person MJCoder; 21.10.2011