I have used the same code as sitepoint URL:
Why markers are not seen?
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
$(function() { // onload handler
var melbourne = new google.maps.LatLng(-37.813611, 144.963056);
var mapOptions = {
zoom: 12,
center: melbourne,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map($("#map_canvas")[0], mapOptions);
var places =
[
{
"title": "Flinders St Station",
"description": "This is a pretty major train station.",
"position": [
-37.818078,
144.966811
]
},
{
"title": "Southern Cross Station",
"description": "Did you know it used to be called Spencer St Station?",
"position": [
-37.818358,
144.952417
]
}
]
var currentPlace = null;
var info = $('#placeDetails');
var icons = {
'train': 'http://google-maps-icons.googlecode.com/files/train.png',
'train-selected': 'http://google-maps-icons.googlecode.com/files/train.png'
}
$.getJSON('places.json', function(places) {
$(places).each(function() {
var place = this;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(place.position[0], place.position[1]),
map: map,
title: place.title,
icon: icons['train']
});
google.maps.event.addListener(marker, 'click', function() {
var hidingMarker = currentPlace;
var slideIn = function(marker) {
$('h1', info).text(place.title);
$('p', info).text(place.description);
info.animate({right: '0'});
}
marker.setIcon(icons['train-selected']);
if (currentPlace) {
currentPlace.setIcon(icons['train']);
info.animate(
{ right: '-320px' },
{ complete: function() {
if (hidingMarker != marker) {
slideIn(marker);
} else {
currentPlace = null;
}
}}
);
} else {
slideIn(marker);
}
currentPlace = marker;
});
});
});
});
</script>
<style>
.map {
width: 700px;
/* The following are required to allow absolute positioning of the
* info window at the bottom right of the map, and for it to be hidden
* when it is "off map"
*/
position: relative;
overflow: hidden;
}
#placeDetails {
position: absolute;
width: 300px;
bottom: 0;
right: -320px;
padding-left: 10px;
padding-right: 10px;
/* Semi-transparent background */
background-color: rgba(0,0,0,0.8);
color: white;
font-size: 80%;
/* Rounded top left corner */
border-top-left-radius: 15px;
-moz-border-radius-topleft: 15px;
-webkit-border-top-left-radius: 15px;
}
/* Fit the text nicely inside the box */
h1 {
font-family: sans-serif;
margin-bottom: 0;
}
#placeDetails p {
margin-top: 0;
}
</style>
<!--[if IE]>
<style>
html #placeDetails {
background-color: black;
}
</style>
<![endif]-->
</head>
<body>
<div class='map'>
<div id='map_canvas' style='height:500px; width: 700px'></div>
<div id='placeDetails'>
<h1></h1>
<p></p>
</div>
</div>
</body>
</html>