Getting The Name of Bus Stop in The Info Windows - google-maps

Can you please help me to figure it out how to get the name of The Bus stop in a the info windows (or as a list) as following image?
I am using this example from Google Maps Api 3 examples and it is listing all Bus Stops but it just getting the title of the stops. Here is the code
var map;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map-canvas'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(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);
This code is working but as I said it is just listing the Name of the stop:
Thanks for your comments a time

Related

setCenter in google map api is not working. map is invisible

I have been working on Google map project and encountered this issue.
I wanted to use setCenter method to relocate map center. I only can see the gray map instead. I think it's supposed to be working find but I don't know what is wrong
Here is how it looks likeenter image description here
enter code here
var map;
var marker;
function initMap(){
var options = {
center: new google.maps.LatLng(37.4989885,127.03282719999993),
zoom : 8
};
map = new google.maps.Map(document.getElementById('map'), options);
marker = new google.maps.Marker({
position : {lat:37.4989885,lng:127.03282719999993},
map : map
});
}
function changePosition(altitude, longitude){
map.setCenter(new google.maps.LatLng(altitude,longitude));
marker.setPosition(new google.maps.LatLng(altitude,longitude));
}
$(function() {
var url = "tourXML";
$.ajax({
type : "GET",
url : url,
dataType : "text",
success : function(data) {
var temp = $.trim(data);
obj = JSON.parse(temp);
var longitude = parseFloat(obj.longitude);
var altitude = parseFloat(obj.altitude);
changePosition(altitude, longitude);
$("#altitude").html(obj.altitude);
$("#longitude").html(obj.longitude);
},
error : function() {
alert("error.");
}
});
});
You can use this code Modified it as per you need
map.setCenter(21.219381 ,72.840128);
or
map.setCenter(pos);
enter code here
function initMap ()
{
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 5,
center: {lat: 21.219381, lng: 72.840128}
});
var geocoder = new google.maps.Geocoder;
var trafficLayer = new google.maps.TrafficLayer();
trafficLayer.setMap(map);
var infowindow = new google.maps.InfoWindow;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
geocoder.geocode({'location': pos}, function(results, status) {
if (status === 'OK') {
if (results[0]) {
console.log(JSON.stringify(results[0]));
map.setZoom(11);
var marker = new google.maps.Marker({
position: pos,
map: map
});
infowindow.setContent(results[0].formatted_address);
infowindow.open(map, marker);
map.setCenter(pos);
} else {
window.alert('No results found');
}
} else {
window.alert('Geocoder failed due to: ' + status);
}
});
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}

Google Maps API - Geocode & Search Nearby

I'm trying to merge together a GOOGLE geocoder script and a 'search nearby' script. I cannot seem to merge it successfully. Help?
The geocoder script lies here:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
function codeAddress() {
var address = document.getElementById('address').value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
And the search nearby script lies here:
var map;
var infowindow;
function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: pyrmont,
zoom: 15
});
var request = {
location: pyrmont,
radius: 500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(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);
So I'm posting on here because I have no idea how to merge them. I tried to merge the scripts together but I couldn't get it to work. Any ideas?
Thanks.
Could be something like this sketch below.
Not sexy, but works.
Don't forget to include the places libary.
JS
var geocoder;
var map;
var infowindow;
var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
var request = {
location: pyrmont,
radius: 500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = '100 Murray St, Pyrmont NSW, Australia';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
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);
http://jsfiddle.net/iambnz/c9ovns0o/
EDIT:
Or you can simply copy and paste this html file, this should work.
http://lab.sourcloud.com/stackoverflow/26071099/
EDIT 2:
First geocode the address and then show places nearby.
var geocoder;
var map;
var infowindow;
//var pyrmont = new google.maps.LatLng(-33.8665433, 151.1956316);
var nearbysearchloc = '';
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var mapOptions = {
zoom: 8,
center: latlng
}
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
codeAddress();
}
function codeAddress() {
geocoder = new google.maps.Geocoder();
var address = '100 Murray St, Pyrmont NSW, Australia';
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
ParseLocation(results[0].geometry.location);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
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);
});
}
function ParseLocation(location) {
var lat = location.lat().toString().substr(0, 12);
var lng = location.lng().toString().substr(0, 12);
nearbysearchloc = new google.maps.LatLng(lat, lng);
ShowPlacesAroundMe(nearbysearchloc);
}
function ShowPlacesAroundMe(location){
var request = {
location: location,
radius: 500,
types: ['store']
};
infowindow = new google.maps.InfoWindow();
var service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
google.maps.event.addDomListener(window, 'load', initialize);
http://jsfiddle.net/iambnz/c0omhyep/

Google Places API - Adding Places Details

I have the following code:
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(start,showError);
}
else{
error('Geo Location is not supported');
}
}
function start(position) {
var mySearch = document.getElementById("search").value;
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: latlng,
zoom: 12
});
var request = {
location: latlng,
radius: 500,
query: mySearch
};
infowindow = new google.maps.InfoWindow();
service = new google.maps.places.PlacesService(map);
service.textSearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
var place = results[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, place.website);
infowindow.open(map, this);
});
}
The code works fine however I am trying to retrieve more details about a place. I know about the place details at: https://developers.google.com/maps/documentation/javascript/places#place_details I'm just unsure where and how to adjust my code to say add in the places website. I'm struggling to work out where to get the reference and then how to use it. If someone could write it within my code that would be great.
Adjusted "createMarker" function (not tested):
function createMarker(place) {
var placeLoc = place.geometry.location;
if (place.icon) {
var image = new google.maps.MarkerImage(
place.icon, new google.maps.Size(71, 71),
new google.maps.Point(0, 0), new google.maps.Point(17, 34),
new google.maps.Size(25, 25));
} else var image = null;
var marker = new google.maps.Marker({
map: map,
icon: image,
position: place.geometry.location
});
var request = {
reference: place.reference
};
google.maps.event.addListener(marker,'click',function(){
service.getDetails(request, function(place, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
var contentStr = '<h5>'+place.name+'</h5><p>'+place.formatted_address;
if (!!place.formatted_phone_number) contentStr += '<br>'+place.formatted_phone_number;
if (!!place.website) contentStr += '<br><a target="_blank" href="'+place.website+'">'+place.website+'</a>';
contentStr += '<br>'+place.types+'</p>';
infowindow.setContent(contentStr);
infowindow.open(map,marker);
} else {
var contentStr = "<h5>No Result, status="+status+"</h5>";
infowindow.setContent(contentStr);
infowindow.open(map,marker);
}
});
});
}
working example

Force an information window instead of zoom on click and change the icon

I'm using MarkerClusterer to group markers and I have 2 questions:
What should I do to prevent the zoom on click and show an information
window instead, like when you click a marker?
Is there any way to change the icon of the cluster for the
markers? I don't want to use the earthquake-like icon as a group icon for my markers.
Thanks in advance.
EDIT
var marker;
var gm_map;
var markerArray = [];
var address = 'Sweden';
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
gm_map.setCenter(results[0].geometry.location);
gm_map.fitBounds(results[0].geometry.bounds);
} else {
alert("Kunde inte genomföra den geologiska inställningen på grund av följande fel:\n\n" + status);
}
});
function initialize() {
var marker, i;
var locations = [["content", 59.328626, 13.485686, 1]];
var options_googlemaps = {
minZoom: 4,
maxZoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18
};
var markerCluster = new MarkerClusterer(gm_map, [], options_markerclusterer, {zoomOnClick: false});
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
alert('center of cluster: '+cluster.getCenter());
});
for(i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: gm_map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
$('#toggle-photolist').fadeIn();
$('#close-overlay').fadeIn();
$('#list-photos').html(locations[i][0]);
}
})(marker, i));
markerArray.push(marker);
markerCluster.addMarkers(markerArray, true);
}
}
$(document).ready(function() {
// INITIERA GOOGLE MAPS
initialize();
});
WORKING zoomOnClick
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18,
zoomOnClick: false
};
var markerCluster = new MarkerClusterer(gm_map, [], options_markerclusterer);
re 1:
var markerCluster = new MarkerClusterer(map, markers ,{zoomOnClick: false});
google.maps.event.addListener(markerCluster,'clusterclick',
function(cluster){
alert('center of cluster: '+cluster.getCenter())
});
The details for the cluster (what info can you get out of it) can be found here:
https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerclusterer/src/markerclusterer.js#801
You can simply show an infoWidow with the center set to cluster.getCenter() in the callback and you will be all set.
re2: Check out this sample with changed icons: http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/examples/advanced_example.html
HTH
You can try this for the info window, it worked perfectly fine for me! :)
//MarkerCluster!!!
var markerCluster = new MarkerClusterer(map, my_markers ,{zoomOnClick: false});
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var content = '';
// Convert lat/long from cluster object to a usable MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
iw.close();
iw.setContent('<h1>Hi this is my Info Window</h1>');
iw.open(map, info);
});
Working example here:
See http://krisarnold.com/2010/10/15/adding-info-windows-to-map-clusters-with-google-maps-api-v3/

Google Maps API v3 multiple markers Infowindow

I've used the code below to display a map with multiple markers and infowindows. Now I have encountered the very common problem of the last infowindow showing up on all markers. I've tried all sorts of solutions including: http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/ and this one http://www.robertbolton.com/blog/google-maps-v3-multiple-markers-and-infowindows-in-a-loop but none of them fix the problem.
Here is my code:
var infowindow = null;
var geocoder;
var map;
$(document).ready(function() {
initialize();
});
function initialize() {
var myOptions = {
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP,
disableDefaultUI: true,
scrollwheel: false
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
setMarkers(map, people);
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
}
var people = [
{"userid":"47","lastname":"lastname1","firstname":"firstname1","address":"Paris, France","phone1":"00000000000","phone2":"","email":"me#me.com"},
{"userid":"42","lastname":"lastname2","firstname":"firstname2","address":"Versaille, France","phone1":"0","phone2":"0","email":"me#me.com"}
];
function setMarkers(map, people) {
for (var i = 0; i < people.length; i++) {
var p = people[i];
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': p["address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
html: p["address"]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
}
geocoding is an asynchronous request. So when you use geocoding inside the for-loop, the loop is already finished when you receive the results, i will always be 1 and point to the last item of people.
What you can do: split the marker-creation into 2 functions. 1 for the loop which calls the 2nd function that creates the markers:
remove the current function setMarkers and add the following 2 functions to your script:
function setMarkers(map,people) {
for (var i = 0; i < people.length; i++) {
setMarker(map, people[i])
}
}
function setMarker(map, people) {
var p=people;
geocoder = new google.maps.Geocoder();
geocoder.geocode( { 'address': p["address"] }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
html: p["address"]
});
var contentString = "Some content";
google.maps.event.addListener(marker, "click", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
The rest of your script may stay as it is.