Google Maps - JavaScript not displaying marker

I have been handed a website to complete some work on, however I am struggling to see why a marker is not displaying on this page.

The page can be viewed here: http://www.4letproperty.co.uk/index.php/Test_Area/Test-Map

I am hoping to get the marker for the location to appear and have the map centered on that location, however at the moment the marker is not appearing.

The code being used is as follows

<script type="text/javascript">
var map;
var infowindow;

function initialize() {
var pyrmont = new google.maps.LatLng(51.3463071, -2.9774175000000014);

map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});

var request = {
location: pyrmont,
radius: 5000,
types: ['']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}

function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}

function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});



google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Open in new window

dchidAsked:
Who is Participating?
 
Julian HansenCommented:
What do you want to do?

Create a marker for the lat/lng you have been given ?  Or search for places within a radius of that location?

The code you have is doing the latter. To add a marker to the map with the code you have been given do this
<script type="text/javascript">
var map;
var marker;
var infowindow;

function initialize() {
	var pyrmont = new google.maps.LatLng(51.3463071, -2.9774175000000014);

	map = new google.maps.Map(document.getElementById('map'), {
		mapTypeId: google.maps.MapTypeId.ROADMAP,
		center: pyrmont,
		zoom: 15
	});
	
	var marker = new google.maps.Marker({
		position: pyrmont,
		map: map
	});

	infowindow = new google.maps.InfoWindow();
	google.maps.event.addListener(marker, 'click', function() {
		infowindow.setContent('<div>Info window content goes here</div>');
		infowindow.open(map, this);
	});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Open in new window

0
 
Heritage02RiderCommented:
have you tried using F12 to debug the code?
0
 
dchidAuthor Commented:
I have looked at the console in Chrome, there are no errors which look as if they would affect the marker being placed.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Julian HansenCommented:
The problem is the following call is not returning any results.
service.search(request, callback);

Open in new window

I found if I copied the service sample exactly so
var request = {
	location: pyrmont,
	radius: '500',
	types: ['store'] // Instead of types: ['']
};

Open in new window

It worked
According to the docs types is optional so this also works
var request = {
	location: pyrmont,
	radius: 5000
};

Open in new window

0
 
dchidAuthor Commented:
Thanks, that brings up pins on the map, however there are multiple pins. The code is now:

<script type="text/javascript">
var map;
var infowindow;

function initialize() {
var pyrmont = new google.maps.LatLng({address:latitude}, {address:longitude});

map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});

var request = {
	location: pyrmont,
	radius: '500',
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.search(request, callback);
}


function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}

function createMarker(place) {
var placeLoc = place.geometry.location;
var marker = new google.maps.Marker({
map: map,
position: place.geometry.location
});



google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(place.name);
infowindow.open(map, this);
});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Open in new window


The lat lng for this particular example should be:
51.3463071, -2.9774175000000014

which shows here on Google Maps

https://maps.google.co.uk/maps?q=51.3463071,+-2.9774175000000014&hl=en&sll=52.8382,-2.327815&sspn=15.668879,22.653809&t=m&z=17

however this is not appearing on the page here:
http://www.4letproperty.co.uk/index.php/Test_Area/Test-Map

Which leads me to think that the code I have been supplied with is not doing what it should anyway. In this instance the code just needs to pick up the one lng lat passed into it at the start and display that single pin centered on the map.
0
 
dchidAuthor Commented:
Perfect that worked. It was just to show just the one property location which is what confused me with the code I was provided.

There are other pages I need to look at which do involve showing the property location along with surrounding places and calculating the distance, but I will take a look at the code and open another question if needed. Thanks for the answer.
0
 
Julian HansenCommented:
You are welcome
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.