Как показать несколько маркеров на карте Google?

Здесь я делаю функциональность, где я получаю широту и долготу из файла JSON. и показ маркеров на карте Google.Как показать несколько маркеров на карте Google?

Но моя проблема только в том, что один маркер отображается на карте google. Другие не показывают.

вот мой формат JSON

{ 
"Data": { 
"-template": "Parallax", 
"Explore": { 
"IslandLife": { 
"TourismLocation": [ 
    { 
    "Title": "Langkawi", 
    "Latitude": "6.350000", 
    "Longitude": "99.800000", 
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA", 
    "VideosList": { 
     "YouTubeVideoID": [ 
     "7HlMpaSspNs", 
     "tzeRnbd77HU", 
     "VkIAbDIVJCA", 
     "ksJ6kwTe9wM" 
     ] 
    } 
    }, 
    { 
    "Title": "Rawa Island", 
    "Latitude": "2.520278", 
    "Longitude": "103.975833", 
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA", 
    "VideosList": { "YouTubeVideoID": "Kx0dUWaALKo" } 
    }, 
    { 
    "Title": "Perhentian Island", 
    "Latitude": "5.903788", 
    "Longitude": "102.753737", 
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA", 
    "VideosList": { 
     "YouTubeVideoID": [ 
     "ZpcdGk5Ee0w", 
     "TQTDOGpflZY" 
     ] 
    } 
    }, 
    { 
    "Title": "Sabah Marine Park", 
    "Latitude": "4.623326", 
    "Longitude": "118.719800", 
    "YouTubePlaylistID": "UUnTJRksbHP4O8JSz00_XRQA", 
    "VideosList": { "YouTubeVideoID": "VCDTEKOqpKg" } 
    } 
] 
} 
} 
} 
}

здесь моя функция, где я retriving широты и lognitutde сверху JSon файла

<script type="text/javascript"> 

    $.getJSON('json/explore.json', function(data) { 
    $.each(data, function(key, val) { 
      for (var i = 0; i < val.Explore.IslandLife.TourismLocation.length; i++) { 
       PlotMarker(val.Explore.IslandLife.TourismLocation[i].Latitude, val.Explore.IslandLife.TourismLocation[i].Longitude); 
    } 
    }); 
}); 

function PlotMarker(lat, lang) { 
var mapProp = { 
    center: new google.maps.LatLng(lat, lang), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}; 
var map = new google.maps.Map(document.getElementById("gmap"), mapProp); 
var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lang), 
}); 
marker.setMap(map); 
} 
google.maps.event.addDomListener(window, 'load', PlotMarker); 
    </script> 


<body> 
    <div id="gmap" style="width: 800px; height:500px;"></div> 
</body>

Как показывают многочисленные маркеры на карте ???

источник

2013-09-02 Rushikesh jogle

Вы показываете несколько маркеров на нескольких картах (перезапись каждая создаваемая вами карта). @ Матвеет ответил хорошо .. Попробуй свой код, и все будет хорошо .. – fernandosavio

Ваша проблема здесь - область действия - вы воссоздаете карту каждый раз, когда вы вызываете PlotMarker - поэтому каждый раз, когда к ней добавляется только один маркер. Объявите вашу карту за пределами функции PlotMarker, что-то вроде:

initialize() { 
    var mapProp = { 
     center: new google.maps.LatLng(lat, lang), 
     zoom: 5, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(document.getElementById("gmap"), mapProp); 
} 

function PlotMarker(lat, lang) { 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(lat, lang), 
    }); 
    marker.setMap(map); 
}

А затем вызвать initialize() на странице загрузки - также, убедитесь, что карта существует перед вызовом функции PlotMarker.

Другой хороший SO ответ с некоторыми примерами кода: https://stackoverflow.com/a/7701386/1803682

источник

2013-09-02 17:33:24 Matthew

Внизу рабочий образец, который я использую в моем проекте метод

JS AddInfoWidnow используется для добавления InfoWindow к маркеру.

function AddInfoWidnow(marker,message) 
{ 
    var infowindow = new google.maps.InfoWindow({ content: message }); 

    google.maps.event.addListener(marker, 'click', function() { 

    infowindow.open(marker.get('map'), marker); 

    }); 

}

Вызовите AddInfoWidnow метод внутри для цикла

function ShowOnMap(ContainerId, mapItems) { 

var DefaultLatLng= new google.maps.LatLng('12.967461', '79.941824'); 

var mapOptions = { 
    center: DefaultLatLng, 
    zoom: 10, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    marker: true 
}; 

var mapCust = new google.maps.Map(document.getElementById(ContainerId), mapOptions); 

var arrJsonObject = JSON.parse(mapItems); 

for (var y = 1; y <= arrJsonObject.length; y++) 
{ 

    var myLatLng1 = new google.maps.LatLng(arrJsonObject[y - 1].Latitude, arrJsonObject[y - 1].Lonngitude); 

    var marker = new google.maps.Marker({ 
    position: myLatLng1, 
    map: mapCust, 
    title: 'Marked at '+ arrJsonObject[y - 1].markedDate 
}); 

    addInfoWindows(marker,y-1,arrJsonObject); 


    marker.setMap(mapCust); 

} 
}

Используйте ниже snnipet назвать отображение

var mapItems='[ 
    { 
    "Latitude": "22.575897", 
    "Lonngitude": "88.431754", 
    "CustomerCode": "*$$$*", 
    "CustomerName": "*@@@*", 
    "markedDate": "2/20/2014 12:04:41 PM" 
    }, 
    { 
    "Latitude": "22.615067", 
    "Lonngitude": "88.431759", 
    "CustomerCode": "*$$$*", 
    "CustomerName": "*@@@*", 
    "markedDate": "2/20/2014 3:02:19 PM" 
    } 
]'; 
    ShowOnMap(containerId2, mapItems);

источник

2014-02-28 12:47:53

Как показать несколько маркеров на карте Google?

ответ

Смежные вопросы