Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 523
  • Last Modified:

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

0
dchid
Asked:
dchid
  • 3
  • 3
1 Solution
 
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
 
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
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
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
 
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
 
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

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now