asked on

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

Heritage02Rider

have you tried using F12 to debug the code?

dchid

ASKER

I have looked at the console in Chrome, there are no errors which look as if they would affect the marker being placed.

Julian Hansen

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

dchid

ASKER

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.

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dchid

ASKER

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.

Julian Hansen

You are welcome