Googlemap With XML Parsing
This is the fiddle for display marker based on the GeoLocationRecord with lat/long and open info-window popup when click on marker and display vacancy for that particular location.
HTML
<title>Geolocation and Google Maps API</title>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div id="map_canvas"></div>
CSS
#map_canvas {
width: 390px;
height: 400px;
margin-top: 10px;
}
JavaScript
var infowindow;
var map;
var myLatLng = [];
function initialize() {
var mapOptions = {
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var bounds = new google.maps.LatLngBounds();
var obj = {
"JobRecord": [{
"ApplyUrl": "test",
"GeoLocations": {
"GeoLocationRecord": [{
"Latitude": "21.543333",
"Longitude": "39.172777"
}]
},
"JobId": "493743",
"JobTitle": "Sales Associate",
"Locations": {
"LocationRecord": [{
"Group": "Saudi Arabia",
"Title": "Taif"
}, {
"Group": "Saudi Arabia",
"Title": "Jeddah"
}]
}
}, {
"ApplyUrl": "test",
"GeoLocations": {
"GeoLocationRecord": {
"Latitude": "55.755826",
"Longitude": "37.617300"
}
},
"JobId": "492725",
"JobTitle": "Business Director - Starbucks - Russia",
"Locations": {
"LocationRecord": {
"Group": "Russia",
"Title": "Moscow"
}
}
}, {
"ApplyUrl": "test",
"GeoLocations": {
"GeoLocationRecord": {
"Latitude": "25.271139",
"Longitude": "55.307485"
}
},
"JobId": "492730",
"JobTitle": "Vice President - Victoria's Secret",
"Locations": {
"LocationRecord": {
"Group": "UAE",
"Title": "Dubai"
}
}
}]
};
var jobs = obj.JobRecord;
for (var i = 0; i < jobs.length; i++) {
if (jobs[i].GeoLocations.length != 0) {
var geoLocationRecord = jobs[i].GeoLocations.GeoLocationRecord;
var myjobs = new Array();
var single = new Object();
if (geoLocationRecord.length === undefined) {
single.JobId = jobs[i].JobId;
single.JobTitle = jobs[i].JobTitle;
single.Locations = jobs[i].Locations.LocationRecord;
var...