We Keep Coding

Google map API displaying marker location in an infowindow

I have a javascript array of locations (jarray), which I am looping over and adding a marker of each location onto a google map. Along with those markers I would like to add an infowindow displaying the marker's location. The code below displays the same latitude and longitude location in each of marker's infowindows. I would like for each marker to have its own address in its infowindow. I have also tried setting the content of the infowindow to results[0].geometry.location, address, and jarray[i] all to no success. Any ideas are greatly appreciated.
for(var i = 0; i < jarray.length; i++){
geocoder.geocode({'address': jarray[i]},
function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
if (status != google.maps.GeocoderStatus.ZERO_RESULTS) {
var marker = new google.maps.Marker({
position: results[0].geometry.location,
map: map,
title: "Marker",
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: "<p>"+marker.position+"</p>"
});
marker.addListener('mouseover', function() {
infowindow.open(map, marker);
});

I don't think a google maps api marker has a location property - you can use position - the method is marker.getPosition()
https://developers.google.com/maps/documentation/javascript/reference?hl=en#Marker
You can then use that position to an address by usign the geocoding (if you need that)
https://developers.google.com/maps/documentation/geocoding/intro

insted of marker.location, use the jarray location itself. You can adapt this code to suit you since I dont know the contents of your jarray.
var infowindow = new google.maps.InfoWindow({
infowindow.setContent(jarray[i]['lat'] +" " + jarray[i]['lat']);
infowindow.open(map, marker);
});

How do I add a custom marker to the following Google maps?

I'm new with Google maps and I like this setup I found on codepen and would like base my own project on it but change the styles, however it does not have markers for addresses which I'd like to be able to add. I also want my marker to be a custom png file. I can understand that the map is centered for a specific lat and lng but I'd like to keep a center value and add two or more addresses near by with custom markers. How would I go about doing that?
var mapOptions = {
zoom: 12,
center: new google.maps.LatLng(27.946672,-82.482866),
disableDefaultUI: true,
styles: styleArray
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Here's the link to the codepen project:
http://codepen.io/JonDCarey/pen/ncJoe
Thank you!

Marker API goes as followed:
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Hello World!'
});
});
See your updated CodePen: http://codepen.io/anon/pen/NPOzvZ
Now custom PNG's are really easy to - just have to change the marker icon, e.g.:
var marker = new google.maps.Marker({
position: LatLng,
map: map,
title: 'Hello World!',
icon: '<URL TO NEW ICON>'
});
});
Here is an example in CodePen: http://codepen.io/anon/pen/dPgKZm
The last is address translation - that's a bit more complex but here is a quick example:
var MarkerFromAddress = function(address) {
geocoder= new google.maps.Geocoder();
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
// I also can center the map here:
map.setCenter(results[0].geometry.location);
}
});
};
MarkerFromAddress("1600 Amphitheatre Parkway, Mountain View");
CodePen example: http://codepen.io/anon/pen/XJxYZM
Hope that helps

How to pass a variable into a function defined in the argument of another function in JavaScript? [duplicate]

This question already has answers here:
Google Maps : Issue regarding marker icons and geocoding
(1 answer)
JavaScript closure inside loops – simple practical example
(44 answers)
Closed 8 years ago.
I am working on Google Maps API v3 javascript. I am using the Geocoder feature where I am passing a city name and plotting it on the map. Along with this marker, I want to add a separate info window for every marker but I am not able to do that. All the infowindows are displaying the content that was set for the last marker instead of setting a different info window for each. Please find the javascript code below:
function initialize() {
geocoder = new google.maps.Geocoder();
var address = document.getElementById('address').value;
var jString = JSON.parse(address);
var infowindow;
for (var key in jString) {
contentStr = JSON.stringify(jString[key]); //This is step where I am setting the content which is independent for every maker
if (jString.hasOwnProperty(key)) {
geocoder.geocode( { 'address': key}, 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
});
infowindow = new google.maps.InfoWindow({
content: contentStr//Not able to access 'contentStr' set above.
});
infowindow.open(map,marker);
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
}
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
After debugging I understood that for some reason, the value of the variable 'contentStr' being set during the last iteration of 'for' loop is only being used for all the below function calls made:
geocoder.geocode( { 'address': key}, function(results, status) {
So basically, I am not able to pass the variable 'contentStr' into the function defined in the argument of another function. I think I am missing something basic here. Could anyone please guide me about this?
Thank you!

I have had the same problem many times. Stolen from link below. You need to attach the infowindow to your marker.
Marker content (infoWindow) Google Maps
function createMarker(lat, lon, html) {
var newmarker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lon),
map: map,
title: html
});
newmarker['infowindow'] = new google.maps.InfoWindow({
content: html
});
google.maps.event.addListener(newmarker, 'mouseover', function() {
this['infowindow'].open(map, this);
});
}
A second way of doing this. :
Google Maps API V3 infoWindow - All infoWindows displaying same content

Google Maps DomListener Causing Error After Going to Different Page

I am having an issue where the dom listener at the bottom of my google maps function in an external Javascript file is causing a "google is not defined" console error. This happens when I go to a different HTML page on my website that also accesses script in the external file. I believe it is because the DomListener is outside the function however the function does not work if the dom listener is inside the function. Can someone please help me with where to put this DomListener to stop this error occurring? My code is below.
Thankyou very much,
Anthony
function validateEmail() {
var email = form.emailaddress.value;
if (form.firstname.value == "") {
document.getElementById("emailInvalid").style.visibility = "visible";
return false;
} return true;
}
function initialize() {
var myLatlng1 = new google.maps.LatLng(-25.363882,150.044922);
var myLatlng2 = new google.maps.LatLng(-25.363882,152.044922);
var mapOptions = {
zoom: 6,
center: myLatlng1
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var contentString1 = 'Mott Park'
var contentString2 = 'Kilpa Park'
var infowindow = new google.maps.InfoWindow({
});
var marker1 = new google.maps.Marker({
position: myLatlng1,
map: map,
title: 'Park'
});
var marker2 = new google.maps.Marker({
position: myLatlng2,
map: map,
title: 'Water'
});
google.maps.event.addListener(marker1, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString1);//update the content for this marker
infowindow.open(map, marker1);
});
google.maps.event.addListener(marker2, 'click', function initialize() {
infowindow.close();//hide the infowindow
infowindow.setContent(contentString2);//update the content for this marker
infowindow.open(map, marker2);
});
}
google.maps.event.addDomListener(window, 'load', initialize);

Here a possible duplicate:
"google is not defined" when using Google Maps V3 in Firefox remotely
I think its might be a placement problem similar to Diego Pino in the thread.

Google Places API, additional marker (manually added) to results

My javascript isn't too hot, I'm trying to add a manual marker onto a number of locations gathered from the Google Places API.
I followed this post to get to my following code (with a few amendments):
<script type="text/javascript">
var map;
var infowindow;
var service ;
base_Icon_festival = "https://maps.gstatic.com/mapfiles/ms2/micons/volcano.png";
shadow_festival = "https://maps.gstatic.com/mapfiles/ms2/micons/volcano.shadow.png";
function initialize(lat,lng)
{
var origin = new google.maps.LatLng(lat,lng);
map = new google.maps.Map(document.getElementById('map'), {
mapTypeId: google.maps.MapTypeId.HYBRID,
center: origin,
zoom: 14,
scrollwheel: false,
});
var request = {
location: origin,
radius: 2500,
types: ['train_station','bus_station','subway_station','airport']
};
infowindow = new google.maps.InfoWindow();
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]);
}
}
}
base_Icon_train = "http://maps.google.com/mapfiles/ms/icons/red-dot.png";
base_Icon_bus = "http://maps.google.com/mapfiles/ms/icons/green-dot.png";
base_Icon_subway = "http://maps.google.com/mapfiles/ms/icons/blue-dot.png";
base_Icon_airport = "http://maps.google.com/mapfiles/ms/icons/yellow.png";
function createMarker(place) {
var placeLoc = place.geometry.location;
var marker;
var icon_to_use;
if (place.types.indexOf('train_station') != -1) {
icon_to_use = base_Icon_train;
} else if (place.types.indexOf('bus_station') != -1) {
icon_to_use = base_Icon_bus;
} else if (place.types.indexOf('subway_station') != -1) {
icon_to_use = base_Icon_subway;
} else if (place.types.indexOf('airport') != -1) {
icon_to_use = base_Icon_airport;
}
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon_to_use
});
var content='<strong style="font-size:1.2em">'+place.name+'</strong>'+
'<br/><strong>Latitude: </strong>'+placeLoc.lat()+
'<br/><strong>Longitude: </strong>'+placeLoc.lng()+
'<br/><strong>Type: </strong>'+place.types[0];
//make a request for further details
service.getDetails({reference:place.reference}, function (place, status)
{
if (status == google.maps.places.PlacesServiceStatus.OK)
{
more_content='<hr/><strong>Details';
if(place.website)
{
more_content+='<br/><br/><strong>'+place.website+'';
}
}
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.setContent(content+more_content);
infowindow.open(map, this);
});
}
google.maps.event.addDomListener(window, 'load', function(){initialize(<?php echo $coordinated; ?>);});
</script>
<div id="map" style="height:400px;"></div>
Now I would like to manually add another marker which is located at the center of the map (ie, the variable origin which is currently being pulled from a PHP variable - var origin = new google.maps.LatLng(lat,lng);). I also need this marker to have a different icon associated with it (base_Icon_festival and shadow_festival respectively).
I'm not sure how to manually add another marker to the ones already gathered by the places API?
End goal: have a festival icon marker at the center of the map and a number of public transport markers surrounding it, resulting code to go on individual festival pages of a website.
Thanks in advance to anyone who can help.

In the Google Maps API, markers are added to the map by creating a Marker object and setting the map property. This is the snippet in your code that adds the existing Markers.
marker = new google.maps.Marker({
map: map,
position: place.geometry.location,
icon: icon_to_use
});
To add a new marker you would just replace the position and icon properties with your values.
new google.maps.Marker({
map: map,
position: origin,
icon: shadow_festival
});
This code can probably be added at the end of the Callback function and if you don't need the actual marker object for anything else, you can just create the Marker object and never assign it.
There is an example from the Google Maps API docs here.