Gmap 3 How to use Ajax Json request for markers + is there a click event?

Question

I am wondering how can I enable this

   $(function(){

        $('#test1').gmap3({
          map:{
            options:{
              center:[46.578498,2.457275],
              zoom: 5
            }
          },
          marker:{
            values:[
              {latLng:[48.8620722, 2.352047], data:"Paris !"},
              {address:"86000 Poitiers, France", data:"Poitiers : great city !"},
              {address:"66000 Perpignan, France", data:"Perpignan ! <br> GO USAP !", options:{icon: "http://maps.google.com/mapfiles/marker_green.png"}}
            ],
            options:{
              draggable: false
            },
            events:{
              mouseover: function(marker, event, context){
                var map = $(this).gmap3("get"),
                  infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.open(map, marker);
                  infowindow.setContent(context.data);
                } else {
                  $(this).gmap3({
                    infowindow:{
                      anchor:marker, 
                      options:{content: context.data}
                    }
                  });
                }
              },
              mouseout: function(){
                var infowindow = $(this).gmap3({get:{name:"infowindow"}});
                if (infowindow){
                  infowindow.close();
                }
              }
            }
          }
        });
      });

Something where tokens are loaded via ajax? I also need events to stay as data (more than that of a “great city”). I need to pull to the big and I need to be in demand.

I assume on the server side I will need something like

 public class Marker
    {
        public string Title { get; set; }
        public double Lat { get; set; }
        public double Lng { get; set; }
    }

Answer 1

A naive, but (I think) perfectly working solution would be to abstract the map initialization logic into a function, call it initMap, which accepts arraymarkers as a parameter:

function initMap(markers) {
    $('#test1').gmap3({
      map:{
        options:{
          center:[46.578498,2.457275],
          zoom: 5
        }
      },
      marker:{
        values: markers || [], // Pass it an empty array if no markers are specified
        options:{
          draggable: false
        }

     ..............
}

( ) AJAX:

$('button').on('click', function() {
    $.ajax({
        url: 'marker.json'
    }).done(function(data) {
        // Re-initialise the map with loaded marker data
        initMap(data);
    });
});

, JSON. - ( , ):

[
    { 
        "latLng":[48.8620722, 2.352047], 
        "data":"Paris !" },
    { 
        "address":"86000 Poitiers, France", 
        "data":"Poitiers : great city !" 
    },
    { 
        "address":"66000 Perpignan, France", 
        "data":"Perpignan ! <br> GO USAP !", 
        "options": {
            "icon": "http://maps.google.com/mapfiles/marker_green.png"
        }
    }
]

, , / , , , , .

Answer 2

@Aperçu , , Google Maps API v3.

:

var map;
var infoWindow = new google.maps.InfoWindow;

function initialize(data) {
// Create the map 
    map = new google.maps.Map(document.getElementById("map-view"), {
        center: new google.maps.LatLng(47.6145, -122.3418),
        zoomControl: false, //disable default zoom and added customize zoom control button
        scrollwheel: false, //disabling mouse scroll to change circle radius on custom zoom
        streetViewControl: false, //disabling streetview 
        panControl: false, //disabling pan control
        mapTypeControl: false, //disabling type control options
        mapTypeId: google.maps.MapTypeId.ROADMAP, //adding custom map style to the map
        scaleControl: true,
        scaleControlOptions: {
            position: google.maps.ControlPosition.BOTTOM_LEFT
        },
        zoom: 13
    });
for (index in data) {
var markers = data[index];
var marker = new google.maps.Marker({
            position: new google.maps.LatLng(markers.lat, markers.lng),
            map: map,
            title: markers.name
        });
google.maps.event.addListener(marker, 'click', function () {
        //If click on the marker we open associated infoWindow
        infoWindow.setContent(markers.name);
        infoWindow.open(map, marker);
});

google.maps.event.addListener(map, 'click', function () {
    //If we click on the map the infowindow is closed
    infoWindow.close();
});
}
}

}

AJAX:

$.ajax({
    url: "%Your controller function which returns json encoded Data%",
    data: specific,
    type: "POST",
    dataType: "json",
    success: function (data) {
          initialize(data);
    }
});

, .