Populate Google Maps Markers from JSON

Question

I'm a jQuery Mobile beginner and I'm trying to read data from JSON file and populate the information (such as coordinates) in a Google Maps marker.

This code works fine but no marker is populated. Anyone could assist me to spot the JSON issue?

$(document).on("pageinit", "#agents", function () {
 var defaultLatLng = new google.maps.LatLng(-25.975769, 32.582499); // Default
 if (navigator.geolocation) {
 function success(pos) {
 // Location found, show map with these coordinates
 drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
 }
 function fail(error) {
 drawMap(defaultLatLng); // Failed to find location, show default map
 }
 // Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
 navigator.geolocation.getCurrentPosition(success, fail, {
 maximumAge: 500000,
 enableHighAccuracy: true,
 timeout: 6000
 });
 } else {
 drawMap(defaultLatLng); // No geolocation support, show default map
 }
 function drawMap(latlng) {
 var myOptions = {
 zoom: 10,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
 //READ FROM JSON
 $.getJSON('data/agents.json', function (data) {
 $.each(data.markers, function (i, marker) {
 var marker = new google.maps.Marker({
 position: Marker.LatLng(marker.latitude, marker.longitude),
 map: map,
 title: Marker.title(marker.latitude, marker.longitude),
 });
 }).click(function () {
 $('#map-canvas').gmap('openInfoWindow', {
 'address': marker.address
 }, this);
 });
 });

JSON

{
 "markers": [{
 "latitude": -25.975769,
 "longitude": 32.582499,
 "title": "ACME Company",
 "address": "my address 1"
 }, {
 "latitude": -25.977743,
 "longitude": 32.579959,
 "title": "XPTO Company",
 "address": "my address 2"
 }]
}

• geocodezip: The code as posted is not valid javascript (the drawMap function is not closed, nor is the initial $(document).on("pageinit").
• Dr.Molle: what is Marker.title()/Marker.LatLng()?
• Andre: I might copy it wrong. The Google map does appear but not the markers. Latlng I believe is an internal function of the API.
• Omar: replace Marker.LatLng(marker.latitude, marker.longitude), with new google.maps.LatLng(marker.latitude, marker.longitude).

Answer 1

Just to reduce confusion I changed the name of the parameter marker tot marker_data (this was not really needed). Your problem was on the lines with position: and title: .

...
//READ FROM JSON
$.getJSON('data_agents.json', function (data) {
 $.each(data.markers, function (i, marker_data) {
 var marker = new google.maps.Marker({
 position: new google.maps.LatLng(marker_data.latitude, marker_data.longitude),
 map: map,
 title: marker_data.title,
 });
 }).click(function () {
 $('#map-canvas').gmap('openInfoWindow', {
 'address': marker_data.address
 }, this);
 });
});
...

The markers get placed on the map, but I didn't check the infowindow

---

EDIT: here is a functioning example

<style>
 #map-canvas {
 height: 500px;
 }
 .gm-style-iw{ /* infowindow */
 width: 200px;
 }
</style>
<div id="map-canvas"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
 $(document).ready(function () {
 var defaultLatLng = new google.maps.LatLng(-25.975769, 32.582499); // Default
 if (navigator.geolocation) {
 function success(pos) {
 // Location found, show map with these coordinates
 drawMap(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
 }
 function fail(error) {
 drawMap(defaultLatLng); // Failed to find location, show default map
 }
 // Find the users current position. Cache the location for 5 minutes, timeout after 6 seconds
 navigator.geolocation.getCurrentPosition(success, fail, {
 maximumAge: 500000,
 enableHighAccuracy: true,
 timeout: 6000
 });
 } else {
 drawMap(defaultLatLng); // No geolocation support, show default map
 }
 function drawMap(latlng) {
 var myOptions = {
 zoom: 10,
 center: latlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions);
 // place the infowindow. Invisible, without content.
 var infowindow = new google.maps.InfoWindow({
 content: '',
 });
 //READ FROM JSON
 $.getJSON('data/agents.json', function (data) {
 $.each(data.markers, function (i, marker_data) {
 var marker = new google.maps.Marker({
 position: new google.maps.LatLng(marker_data.latitude, marker_data.longitude),
 map: map,
 title: marker_data.title,
 });
 // when the client clicks on a marker we set the content and bind the position to the marker
 google.maps.event.addListener(marker, 'click', function() {
 infowindow.setContent(marker_data.address);
 infowindow.setPosition(this.getPosition())
 infowindow.setMap(map);
 });
 });
 });
 }
 });
</script>