Develop Reference

Make Google maps callback wait for rest of functions to finish

I am having difficulty with the way google calls its maps api. I have the following calling initMap
<script defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY_REMOVED&callback=initMap">
</script>
but inside initMap, the following condition if(getPosition() !== false) { never evaluates to true because init map is done before getPosition() has set its object values.
function initMap() {
// set new map, assign default properties
map = new google.maps.Map(document.getElementById('map'), {
center: { lat, lng }, zoom: 14
});
// check if the requested data is usable (lat, lng === numbers) before trying to use it
if(getPosition() !== false) {
map.setCenter( getPosition() ); // set latest position as the map center
addMarker();
console.log("InitMap ran here");
}
}
How can I make it so initMap waits until getPosition() has had a chance to wait for other functions to do their thing? Here is my complete script so it makes more sense.
<script>
console.log(formatTime(Date()));
// https://developers.google.com/maps/documentation/javascript/geolocation
var map; var marker;
var lat = 65.025984; var lng = 25.470794; // default map location in case no position response is available
var res_data; var res_longitude; var res_latitude; var res_speed; var res_time; // res = response (data from the ajax call)
var xhr = new XMLHttpRequest();
function getPosition() {
pos = {
lat: res_latitude,
lng: res_longitude,
};
return ( isNaN(pos.lat) || isNaN(pos.lng) ) ? false : pos; // return pos only if lat and lng values are numbers
}
function initMap() {
// set new map, assign default properties
map = new google.maps.Map(document.getElementById('map'), {
center: { lat, lng }, zoom: 14
});
// check if the requested data is usable (lat, lng === numbers) before trying to use it
if(getPosition() !== false) {
map.setCenter( getPosition() ); // set latest position as the map center
addMarker();
console.log("InitMap ran here");
}
}
// place marker on the map
function addMarker() {
//console.log("Add Marker ran");
//https://developers.google.com/maps/documentation/javascript/markers
if(marker){ marker.setMap(null); } // remove visibility of current marker
marker = new google.maps.Marker({
position: getPosition(),
map: map,
title: formatTime(res_time),
});
marker.setMap(map); // set the marker
}
function getData() {
xhr.addEventListener("load", reqListener);
xhr.open("GET", "http://example.com/data.txt");
xhr.send();
}
function reqListener() {
// res_data = long, lat, accuracy, speed, time
//console.log("reqListener: " + xhr.responseText);
res_data = '[' + xhr.responseText + ']';
res_data = JSON.parse(res_data);
res_latitude = res_data[0]; res_longitude = res_data[1]; res_accuracy = res_data[2]; res_speed = res_data[3]; res_time = res_data[4];
var formatted_time = formatTime(res_time);
document.getElementById('info').innerHTML = '<span class="info">Lat: ' + res_latitude + '</span><span class="info">Long: ' + res_longitude + '</span><span class="info">Accuracy: ' + res_accuracy + '</span><span class="info">Speed: ' + res_speed + '</span><span class="info">' + formatted_time + '</span>';
addMarker();
}
function formatTime(time) {
var t = new Date(time);
var hours, mins, secs;
if(t.getHours() < 10) { hours = "0" + t.getHours(); } else { hours = t.getHours(); }
if(t.getMinutes() < 10) { mins = "0" + t.getMinutes(); } else { mins = t.getMinutes(); }
if(t.getSeconds() < 10) { secs = "0" + t.getSeconds(); } else { secs = t.getSeconds(); }
var hms = hours +':'+ mins +':'+ secs;
return 'Updated: ' + hms;
}
function init() {
getData();
setInterval(getData, 5000);
}
init();
</script>
<script defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY_REMOVED&callback=initMap">
</script>

Get rid of the callback=initMap from where you load in the Maps API.
Instead make a call to initMap only from where you are then certain everything is loaded. e.g. at the end of reqListener.
function reqListener() {
res_data = '[' + xhr.responseText + ']';
res_data = JSON.parse(res_data);
res_latitude = res_data[0]; res_longitude = res_data[1]; res_accuracy = res_data[2]; res_speed = res_data[3]; res_time = res_data[4];
var formatted_time = formatTime(res_time);
document.getElementById('info').innerHTML = '<span class="info">Lat: ' + res_latitude + '</span><span class="info">Long: ' + res_longitude + '</span><span class="info">Accuracy: ' + res_accuracy + '</span><span class="info">Speed: ' + res_speed + '</span><span class="info">' + formatted_time + '</span>';
initMap();
addMarker();
}
If you're calling reqListener at repeated intervals and don't want to recreate your map, add some logic to the top of initMap like:
if (map !== null) {
return;
}

Google Map Geocoded TypeError in Callback function

I have the following 2 functions to pull in, geocode, and place markers in a google map.
I keep getting a TypeError: adds[i] is undefined, which of course is causing the rest of the map to bomb.
Here is my code:
// Place Markers on the Map
var PlaceMarkers = function (iw, adds, gc) {
var image = {url: "http://meatmysite.com/Images/star2.png", size: new google.maps.Size(24, 24)};
var aCt = adds.length;
for(var i = 0; i < aCt; ++i) {
GetLatLng(gc, adds[i].address, function(pos) {
if(pos) {
var ipop = '<h1>' + adds[i].title + '</h1>'; // <----- TypeError: adds[i] is undefined
if(!isBlank(adds[i].url)){
ipop += '' + adds[i].url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content' + i + '">' + adds[i].content + '</div>';
if(!isBlank(adds[i].mainphone)){
ipop += '<br /><strong>Phone:</strong> ' + adds[i].mainphone + '';
}
if(!isBlank(adds[i].mainemail)){
ipop += '<br /><strong>Email:</strong> ' + adds[i].mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({title: adds[i].title, position: pos, map: map, icon: image, html: ipop});
google.maps.event.addListener(mark, 'click', function(){
iw.setContent(this.html);
iw.open(map, this);
});
}
});
}
};
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
var ret = '';
gc.geocode({'address': add}, function(res, status) {
if (status == 'OK') {
f(res[0].geometry.location);
console.log('Found Here: ' + ret.toString());
}
});
return -1;
};
DEMO RETURNED DATA FOR adds
[
{
"address": "1 My Street Gilbert, AZ 85234",
"title": "My Title 1",
"url": "http://www.myurl.com/",
"mainphone": null,
"mainemail": null,
"content": "1 My Street<br />Gilbert, AZ 85234"
},
{
"address": "2 My Street North Richland Hills, TX 76182",
"title": "My Title 2",
"url": null,
"mainphone": null,
"mainemail": null,
"content": "2 My Street<br />North Richland Hills, TX 76182"
}
]

One option, pass the complete "address" object into the GetLatLng function, and from there into its callback (so you get function closure on it):
// Get Lat/Lng Location
var GetLatLng = function (gc, add, f) {
gc.geocode({
'address': add.address
}, function (res, status) {
if (status == 'OK') {
f(res[0].geometry.location, add);
}
});
};
Then use it like this inside the callback (you could pass just the index into the array also):
GetLatLng(gc, adds[i], function (pos, add) {
if (pos) {
var ipop = '<h1>' + add.title + '</h1>';
if (!isBlank(add.url)) {
ipop += '' + add.url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>';
if (!isBlank(add.mainphone)) {
ipop += '<br /><strong>Phone:</strong> ' + add.mainphone + '';
}
if (!isBlank(add.mainemail)) {
ipop += '<br /><strong>Email:</strong> ' + add.mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({
title: add.title,
position: pos,
map: map,
icon: image,
html: ipop
});
google.maps.event.addListener(mark, 'click', function () {
iw.setContent(this.html);
iw.open(map, this);
});
}
});
proof of concept fiddle
code snippet:
var geocoder = new google.maps.Geocoder();
var map;
var infoWindow = new google.maps.InfoWindow();
function initialize() {
map = new google.maps.Map(
document.getElementById("map_canvas"), {
center: new google.maps.LatLng(37.4419, -122.1419),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
PlaceMarkers(infoWindow, adds, geocoder);
}
google.maps.event.addDomListener(window, "load", initialize);
// Place Markers on the Map
var PlaceMarkers = function(iw, adds, gc) {
var bounds = new google.maps.LatLngBounds();
var image = {
url: "http://meatmysite.com/Images/star2.png",
size: new google.maps.Size(24, 24)
};
var aCt = adds.length;
for (var i = 0; i < aCt; ++i) {
GetLatLng(gc, adds[i], function(pos, add) {
if (pos) {
var ipop = '<h1>' + add.title + '</h1>'; // <----- TypeError: adds[i] is undefined
if (!isBlank(add.url)) {
ipop += '' + add.url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content' + i + '">' + add.content + '</div>';
if (!isBlank(add.mainphone)) {
ipop += '<br /><strong>Phone:</strong> ' + add.mainphone + '';
}
if (!isBlank(add.mainemail)) {
ipop += '<br /><strong>Email:</strong> ' + add.mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({
title: add.title,
position: pos,
map: map,
// icon: image,
html: ipop
});
bounds.extend(mark.getPosition());
map.fitBounds(bounds);
google.maps.event.addListener(mark, 'click', function() {
iw.setContent(this.html);
iw.open(map, this);
});
}
});
}
};
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
gc.geocode({
'address': add.address
}, function(res, status) {
if (status == 'OK') {
f(res[0].geometry.location, add);
}
});
};
var adds = [{
"address": "1 My Street Gilbert, AZ 85234",
"title": "My Title 1",
"url": "http://www.myurl.com/",
"mainphone": null,
"mainemail": null,
"content": "1 My Street<br />Gilbert, AZ 85234"
}, {
"address": "2 My Street North Richland Hills, TX 76182",
"title": "My Title 2",
"url": null,
"mainphone": null,
"mainemail": null,
"content": "2 My Street<br />North Richland Hills, TX 76182"
}];
function isBlank(str) {
return (!str || /^\s*$/.test(str));
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_canvas"></div>

This looks like a typical binding issue. By the time your callback is called, the value of adds[i] will have changed. It is likely that the loop terminated and i has now a value of last index + 1, which is pointing to nothing. Note that it could also point to the wrong index, that would not fail but use the wrong data.
You must bind the value of adds[i] locally for each iteration or the callback will just use a reference to a global value. There a multiple ways to go about this, here is a simple one where we keep passing adds[i] along as a function argument.
Replace adds[i].address with adds[i] when calling GetLatLng and add a second parameter add to the callback:
GetLatLng(gc, adds[i], function(pos, add) {
...
});
Then modify GetLatLng to use add.address instead of just add and add add to the callback call:
// Get Lat/Lng Location
var GetLatLng = function(gc, add, f) {
var ret = '';
gc.geocode({'address': add.address}, function(res, status) {
if (status == 'OK') {
f(res[0].geometry.location, add);
console.log('Found Here: ' + ret.toString());
}
});
return -1;
};
Then in the callback function, replace all instances of adds[i] with add to use the local variable.
I didn't set up a test but it should theoretically work.

you appear to be overcomplicating things. Any reason why you can't do this?
// Place Markers on the Map
var PlaceMarkers = function (iw, adds, gc) {
var aCt = adds.length;
for(var i = 0; i < aCt; ++i) {
var obj=adds[i];
GetLatLng(gc, obj)
}
};
// Get Lat/Lng Location
var GetLatLng = function(gc, obj) {
var ret = '';
gc.geocode({'address': obj.address}, function(res, status) {
if (status == 'OK') {
var pos=res[0].geometry.location;
var ipop = '<h1>' + obj.title + '</h1>'; // <----- TypeError: adds[i] is undefined
if(!isBlank(obj.url)){
ipop += '' + obj.url + '<br />';
}
ipop += '<div class="map_item_content" id="mi_content">' + obj.content + '</div>';
if(!isBlank(obj.mainphone)){
ipop += '<br /><strong>Phone:</strong> ' + obj.mainphone + '';
}
if(!isBlank(obj.mainemail)){
ipop += '<br /><strong>Email:</strong> ' + obj.mainemail + '';
}
console.log('HEY NOW: ' + pos.toString() + ' - Location Found!');
var mark = new google.maps.Marker({title: obj.title, position: pos, map: map, html: ipop});
google.maps.event.addListener(mark, 'click', function(){
iw.setContent(this.html);
iw.open(map, this);
});
} else {
console.log("geocoder problem!")
}
});
};

for(var i = 0; i < aCt - 1; ++i). You need to add "-1" in you for-loop. The array starts at index 0 and not 1. You also need to be careful with using functions in a for loop. Within javascript a for-loop does not have a scope from itself. Only functions create new scopes.

Google Map:- InvalidValueError: setIcon: not a string; and no url property; and no path property

I am getting this error in google maps.
Error: InvalidValueError: setIcon: not a string; and no url property; and no path property
Earlier it was working fine and i never changed my code.
I have seen a post Google Maps Error: Uncaught InvalidValueError: setIcon: not a string; and no url property; and no path property with same issue and applied the change mentioned in the answer. Earlier it was working and now it also stopped working.
It Seems that google has changed something in their API but not sure what exactly. I found the same issue found by some other users too # https://code.google.com/p/gmaps-api-issues/issues/detail?id=7423
My website link is http://www.advantarealty.net/Search//Condo,Single-Family-Home,Townhome_PropertyType/True_ForMap/ just open in firefox and see the error console.
I have included below js files for map.
<script src="https://maps.googleapis.com/maps/api/js?v=3&sensor=true&libraries=drawing"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.9/src/markerwithlabel.js"></script>
<div id="map-canvas" class="map-view">hello</div>
Below is the complete javascript code which i used.
<script>
var defaultLat = '#Html.Raw(Model != null && Model.Count() > 0 ? Convert.ToDouble(Model[0].Latitude) : 0)';
var defaultLong = '#Html.Raw(Model != null && Model.Count() > 0 ? Convert.ToDouble(Model[0].Longitude) : 0)';
if (defaultLat == 0)
defaultLat = $('#SearchLatitude').val();
if (defaultLong == 0)
defaultLong = $('#SearchLongitude').val();
// var json = JSON.parse('#str');
// Add this for testing only
var json = JSON.parse('[ { "DaysOnAdvanta": "400", "Name": null, "com_address": null, "MLS_ID": "miamimls", "MLS_STATE_ID": "FL", "MLS_LISTING_ID": "A1677437", "mls_office_id": null, "MLS_Office_Name": "EWM Realty International ", "MLS_AGENT_ID": null, "MLS_Agnet_Name": null, "SALE_PRICE": "400000", "Address": "5800 N BAY RD", "city": "Miami Beach", "zip_code": "33140", "remarks": "", "property_type_code": "Residential", "County": null, "Subdivision": "LA GORCE GOLF SUB PB 14-4", "status_code": "Active", "Year_Built": "1929", "acres": "0", "LOT_SQUARE_FOOTAGE": "52881", "BUILDING_SQUARE_FOOTAGE": "12153", "Bedroom_Count": "7", "Full_Baths": "8", "Half_Baths": null, "Fire_place_Number": null, "has_virtual_tour": null, "has_garage": null, "has_firepalce": null, "has_horses": null, "has_pool": null, "has_golf": null, "has_tennis": null, "is_gated": null, "is_waterfront": null, "has_photo": null, "photo_quantity": "25", "photo_url": null, "virtual_tour_url": "http://www.obeo.com/u.aspx?ID=630180", "last_updated": null, "listing_date": null, "garage": null, "last_image_transaction": null, "complex_building": null, "display_address": null, "advertise": null, "IMAGE": "/images/PhotoNotAvailable_Large.gif ", "visit": null, "inforequest": null, "FollwID": 0, "Latitude": "25.83835", "Longitude": "-80.13273", "Special": "", "price_change_direction": "", "location_id": "48153" } ]');
// console.log(json);
var contentString = "<div style='width: 200px; height: 250px;text-align: center;'>" +
"<img src='//image6.sellectrified.com/flex/RX-3/113/RX-3113755-1.jpeg' width='200' alt='No Image' style='max-height: 130px;' />" +
"<table style='width: 100%; border-collapse: collapse;'>" +
"<tr>" +
"<td style='text-align:left;height:20px;'>" +
"$155,000" +
"</td>" +
"<td style='text-align:right;height:20px;'>" +
"2754, Dora Ave" +
"</td>" +
"</tr>" +
"<tr>" +
"<td>" +
"</td>" +
"<td>" +
"<a href='javascript:void(0);'>" +
"<div class='btn btn-primary card-btn'>Details</div>" +
"</a>" +
"</td>" +
"</tr>" +
"</table>" +
"<table style='width: 100%; border-collapse: collapse;border-top:1px solid gray;'>" +
"<tr>" +
"<td style='text-align:center;font-size: 10px;'>" +
"2 BEDS" +
" " +
"1 BATH" +
" " +
"1,235 Sq.ft." +
" " +
"1.3 ACRE" +
"</td>" +
"</tr>" +
"</table>" +
"</div>";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
var m = [];
function initialize() {
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();
var myLatlng = new google.maps.LatLng(defaultLat, defaultLong);
var mapOptions = {
center: myLatlng,
zoom: 8
//mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
if (json.length > 0) {
$(json).each(function (i) {
var latlng = new google.maps.LatLng(json[i].Latitude, json[i].Longitude);
var marker = new MarkerWithLabel({
position: latlng,
draggable: false,
raiseOnDrag: false,
map: map,
labelContent: "$" + (json[i].SALE_PRICE / 1000) + 'k',
labelAnchor: new google.maps.Point(22, 0),
labelClass: "marker", // the CSS class for the label
icon: {},
title: json[i].Address,
id: json[i].MLS_ID + '-' + json[i].MLS_LISTING_ID
});
m.push(marker);
google.maps.event.addListener(marker, 'mouseover', function () {
var contentString = "<div style='width: 200px; text-align: center;'>" +
"<img src='" + json[i].IMAGE + "' width='200' alt='' style='max-height: 130px;' />" +
"<table style='width: 100%;'>" +
"<tr>" +
"<td style='text-align:left;padding: 5px 0;'>" +
"$" + json[i].SALE_PRICE +
"</td>" +
"<td style='text-align:right;padding: 5px 0;'>" +
json[i].Address +
"</td>" +
"</tr>" +
"<tr>" +
"<td colspan='2' style='text-align:right;padding: 5px 0;'>" +
"<a class='orange-btn-small' href='/Home/PropertyDetail/" + json[i].location_id + "/" + json[i].MLS_ID + "/" + json[i].MLS_LISTING_ID + "/" + json[i].Address + "'>Details</a>" +
"</td>" +
"</tr>" +
"</table>" +
"<table style='width: 100%; border-top:1px solid gray;'>" +
"<tr>" +
"<td style='text-align:center;font-size: 10px;'>" +
json[i].Bedroom_Count + " BEDS" +
" " +
json[i].Full_Baths + " BATH" +
" " +
json[i].BUILDING_SQUARE_FOOTAGE + " Sq.ft." +
"</td>" +
"</tr>" +
"</table>" +
"</div>";
infowindow.setContent(contentString);
infowindow.open(map, marker);
//getFocusLeftList(sn);
});
//extend the bounds to include each marker's position
bounds.extend(marker.position);
});
//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);
}
var drawingManager = new google.maps.drawing.DrawingManager({
drawingMode: null,
//drawingMode: google.maps.drawing.OverlayType.MARKER,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
google.maps.drawing.OverlayType.POLYGON
]
},
circleOptions: {
fillColor: '#ffff00',
fillOpacity: 1,
strokeWeight: 5,
clickable: false,
editable: true,
zIndex: 1
}
});
//To add event on circle complete.
google.maps.event.addListener(drawingManager, 'circlecomplete', function (circle) {
var radius = circle.getRadius();
//alert(radius);
});
//To add event on drawing complete.
google.maps.event.addListener(drawingManager, 'overlaycomplete', function (event) {
if (event.type == google.maps.drawing.OverlayType.CIRCLE) {
DrawCircleMarker(event.overlay);
var radius = event.overlay.getRadius();
//alert(radius);
}
else if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
var cordinates = event.overlay.getBounds();
// alert(cordinates);
}
else if (event.type == google.maps.drawing.OverlayType.POLYGON) {
var arrayPath = event.overlay.getPath().b;
GetMaxMinLatLng(event.overlay);
$('#Polygon').val(MasterPoly);
changeView($('#map-canvas'), 'map');
}
});
drawingManager.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
var MaxLat = 0;
var MaxLng = 0;
var MinLat = 0;
var MinLng = 0;
var MasterPoly = '';
var Polygon;
function GetMaxMinLatLng(poly) {
var polyPoints = poly.getPath();
var oddNodes = false;
if (Polygon != null)
Polygon.setMap(null);
Polygon = poly;
for (var i = 0; i < polyPoints.getLength() ; i++) {
if (i == 0) {
MaxLat = polyPoints.getAt(i).lat();
MaxLng = polyPoints.getAt(i).lng();
MinLat = polyPoints.getAt(i).lat();
MinLng = polyPoints.getAt(i).lng();
var con = new Contour(polyPoints.j);
var c = con.centroid();
centerLat = c.y;
centerLong = c.x;
centerPoint = new google.maps.LatLng(centerLat, centerLong);
}
if (polyPoints.getAt(i).lat() > MaxLat) {
MaxLat = polyPoints.getAt(i).lat();
$('#SearchLatitude').val(MaxLat);
}
if (polyPoints.getAt(i).lat() < MinLat) {
MinLat = polyPoints.getAt(i).lat();
}
if (polyPoints.getAt(i).lng() > MaxLng) {
MaxLng = polyPoints.getAt(i).lng();
$('#SearchLongitude').val(MaxLng);
}
if (polyPoints.getAt(i).lng() < MinLng) {
MinLng = polyPoints.getAt(i).lng();
}
}
MasterPoly = MinLng + ' ' + MaxLat + ',' + MinLng + ' ' + MinLat + ',' + MaxLng + ' ' + MinLat + ',' + MaxLng + ' ' + MaxLat + ',' + MinLng + ' ' + MaxLat;
}
function Point(x, y) {
this.x = x;
this.y = y;
}
// Contour object
function Contour(points) {
this.pts = points || []; // an array of Point objects defining the contour
}
Contour.prototype.area = function () {
var area = 0;
var pts = this.pts;
var nPts = pts.length - 1;
var j = nPts - 1;
var p1; var p2;
for (var i = 0; i < nPts; j = i++) {
p1 = pts[i]; p2 = pts[j];
area += p1.A * p2.k;
area -= p1.k * p2.A;
}
area /= 2;
return area;
};
Contour.prototype.centroid = function () {
var pts = this.pts;
var nPts = pts.length - 1;
var x = 0; var y = 0;
var f;
var j = nPts - 1;
var p1; var p2;
for (var i = 0; i < nPts; j = i++) {
p1 = pts[i]; p2 = pts[j];
f = p1.A * p2.k - p2.A * p1.k;
x += (p1.A + p2.A) * f;
y += (p1.k + p2.k) * f;
}
f = this.area() * 6;
return new Point(x / f, y / f);
};
$(".SearchProp").hover(function () {
var lat = $(this).attr("lat");
var long = $(this).attr("long");
var sequence = $(this).attr("seq")
google.maps.event.trigger(m[sequence], "mouseover");
var laLatLng = new google.maps.LatLng(lat, long);
});
</script>

Finally I figured out the issue.
Earlier markerwithlabel javascript library, if we want to hide the marker and only want to show the label, we just pass an empty braces to icon parameter like below
var marker = new MarkerWithLabel({
position: latlng,
draggable: false,
raiseOnDrag: false,
map: map,
labelContent: "$" + (json[i].SALE_PRICE / 1000) + 'k',
labelAnchor: new google.maps.Point(22, 0),
labelClass: "marker", // the CSS class for the label
icon: {},
title: json[i].Address,
id: json[i].MLS_ID + '-' + json[i].MLS_LISTING_ID
});
icon: {},
But now it doesn't work, you must have to supply an image icon for that. SO when I supplied a transparent image to icon, it works now.
icon: '/images/transparent-1x1.png',
Also I am now using latest js library for that
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.10/src/markerwithlabel.js

I happened to fall in the same issue and below is the solution which helped me, I hope this helps you too.
First add this google marker with label script in a JS file- (mine is MarkerWithLabel.js)
https://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/markerwithlabel/src/markerwithlabel.js?r=131
Then add the below mentioned google map JS libraries on the page-
https://maps.googleapis.com/maps/api/js?key=some_key_here&sensor=false
~/Scripts/MarkerWithLabel.js
function showMap() {
var address = $('#corp-add').text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var latitude = results[0].geometry.location.lat();
var longitude = results[0].geometry.location.lng();
var mapOptions = {
center: new google.maps.LatLng(latitude, longitude),
zoom: 16
};
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new MarkerWithLabel({
position: new google.maps.LatLng(latitude, longitude),
draggable: true,
raiseOnDrag: true,
map: map,
labelContent: "$425K",
labelAnchor: new google.maps.Point(22, 0),
labelClass: "labels", // the CSS class for the label
labelStyle: { opacity: 0.75 }
});
var iw1 = new google.maps.InfoWindow({
content: "This is a test marker"
});
google.maps.event.addListener(marker, "click", function (e) { iw1.open(map, this); });
}
});
In my code above I am using Google GeoCoder to convert address to Latitudes and Longitudes. You can modify the above code according to your requirements.
You can also follow these links and they might be helpful-
http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.8/docs/examples.html
Let me know if you need more details from me.
Regards,
Manik

Uncaught ReferenceError: google is not defined (Wordpress)

Below is the code I am working with. I'm trying to fix an error with a map not displaying in all browsers.
In dev tools (chrome), I'm getting a Uncaught ReferenceError: google is not defined error.
$(document).ready(function(){
//google map
function loadGoogleMap() {
var mapOptions = {
scrollwheel: false,
zoom: 14,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map($("#map")[0], mapOptions);
var bounds = new google.maps.LatLngBounds();
var count = 0;
$.each(dealers, function(ind,dealer){
var point = new google.maps.LatLng(dealer.lat,dealer.lng)
var marker = new google.maps.Marker({
position: point,
map: map,
title: dealer.post_title,
icon: icons[count]
});
var infowindow = new google.maps.InfoWindow({
content:'<div class="infowindow">'+
'<strong>' + dealer.post_title + '</strong><br/>' +
'<address>' +
dealer.address1 + '<br/>' +
dealer.city + ', ' + dealer.state + '<br/>' +
'</address>' +
dealer.phone + '<br/>' +
(dealer.url != '' ? 'Dealer Website<br/>' : '') +
(dealer.email != '' ? 'Email Dealer<br/>' : '') +
'Get Directions'+
'</div>'
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
// add event listener to distributor list
$('#distributors-list li:eq(' + count + ')').click(function(){
infowindow.open(map,marker);
});
bounds.extend(point);
count++;
});
map.fitBounds(bounds);
}
loadGoogleMap();
// reuse fancybox loading icon script
var loadingTimer, loadingFrame = 1;
var locator_animate_loading = function() {
locatorLoading = $('#ajax-loading-overlay');
if (!locatorLoading.is(':visible')){
clearInterval(loadingTimer);
return;
}
$(locatorLoading).css('background-position', '0 ' + (loadingFrame * -40) + 'px');
loadingFrame = (loadingFrame + 1) % 12;
};
$('form.distributor-search').submit(function(e){
locatorLoading = $('#ajax-loading-overlay');
locatorLoading.show();
loadingTimer = setInterval(locator_animate_loading, 66);
$('#locator-content').load(site_url + '/graceports/find-a-distributor?ajax=1&address=' + encodeURIComponent($('#address_search').val()) + ' #ajax-contents', function() {
// load updated list of dealers
$('#locator-content').append('<script src="' + site_url + '/js/dealers.php?address=' + encodeURIComponent($('#address_search').val()) + '"></script>');
loadGoogleMap();
locatorLoading.hide();
});
e.preventDefault();
});
navigator.geolocation.getCurrentPosition(function(position){
$.get(site_url + '/cms/wp-content/themes/grace/inc/latlng-to-zip.php?latlng=' + encodeURIComponent(position.coords.latitude + ' ' + position.coords.longitude), function(data){
$('#address_search').val(data);
$('form.distributor-search').trigger('submit');
});
});
});

You need to wait until google has loaded before running your scripts. Put this somewhere in your document:
$(document).ready(function(){
//google map
function loadGoogleMap() {
var mapOptions = {
scrollwheel: false,
zoom: 14,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map($("#map")[0], mapOptions);
var bounds = new google.maps.LatLngBounds();
function loadScript() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' +
'callback=initialize';
document.body.appendChild(script);
}
var count = 0;
$.each(dealers, function(ind,dealer){
var point = new google.maps.LatLng(dealer.lat,dealer.lng)
var marker = new google.maps.Marker({
position: point,
map: map,
title: dealer.post_title,
icon: icons[count]
});
var infowindow = new google.maps.InfoWindow({
content:'<div class="infowindow">'+
'<strong>' + dealer.post_title + '</strong><br/>' +
'<address>' +
dealer.address1 + '<br/>' +
dealer.city + ', ' + dealer.state + '<br/>' +
'</address>' +
dealer.phone + '<br/>' +
(dealer.url != '' ? 'Dealer Website<br/>' : '') +
(dealer.email != '' ? 'Email Dealer<br/>' : '') +
'Get Directions'+
'</div>'
});
google.maps.event.addListener(marker,'click',function(){
infowindow.open(map,marker);
});
// add event listener to distributor list
$('#distributors-list li:eq(' + count + ')').click(function(){
infowindow.open(map,marker);
});
bounds.extend(point);
count++;
});
map.fitBounds(bounds);
}
loadGoogleMap();
// reuse fancybox loading icon script
var loadingTimer, loadingFrame = 1;
var locator_animate_loading = function() {
locatorLoading = $('#ajax-loading-overlay');
if (!locatorLoading.is(':visible')){
clearInterval(loadingTimer);
return;
}
$(locatorLoading).css('background-position', '0 ' + (loadingFrame * -40) + 'px');
loadingFrame = (loadingFrame + 1) % 12;
};
$('form.distributor-search').submit(function(e){
locatorLoading = $('#ajax-loading-overlay');
locatorLoading.show();
loadingTimer = setInterval(locator_animate_loading, 66);
$('#locator-content').load(site_url + '/graceports/find-a-distributor?ajax=1&address=' + encodeURIComponent($('#address_search').val()) + ' #ajax-contents', function() {
// load updated list of dealers
$('#locator-content').append('<script src="' + site_url + '/js/dealers.php?address=' + encodeURIComponent($('#address_search').val()) + '"></script>');
loadGoogleMap();
locatorLoading.hide();
});
e.preventDefault();
});
navigator.geolocation.getCurrentPosition(function(position){
$.get(site_url + '/cms/wp-content/themes/grace/inc/latlng-to-zip.php?latlng=' + encodeURIComponent(position.coords.latitude + ' ' + position.coords.longitude), function(data){
$('#address_search').val(data);
$('form.distributor-search').trigger('submit');
});
});
});

Google Maps API V3 function closure for loops for markers

I have been reading other entries into stackoverflow but I really cannot get my head around how this works:
for(a in elements){
var address = elements[a].location;
var contentString = '<table>';
for(b in elements[a].other_fields){
var current = elements[a].other_fields[b];
switch(current.type){
case "text":
contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].value + "</td></tr>";
break;
case "date":
if(!current.values[0].end){
var end_date_output_string = "";
}else{
var end_date_output_string = " -> " + current.values[0].end;
}
contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].start + end_date_output_string + "</td></tr>";
break;
}
}
contentString += "</table>";
contentString += "<input type = 'button' onclick = 'window.open(\"" + elements[a].url + "\");' value = 'Open in Podio'>";
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
alert(contentString);
addMarker(results[0].geometry.location);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
//open_info_window(a, contentString);
}
function addMarker(location) {
var marker_copy = new google.maps.Marker({
position: location,
map: map
});
marker = marker_copy;
markersArray.push({
"marker": marker,
"info_window": null
});
alert("marker added: " + markersArray.lenght);
}
// Opens info windows
function open_info_window(key, contentString) {
var infowindow = new google.maps.InfoWindow({
content: contentString
});
alert(key);
markersArray[key].info_window = infowindow;
google.maps.event.addListener(markersArray[key].marker, "click", function() {
markersArray[key].info_window.open(map, markersArray[key].marker);
});
}
The part where I try to alert(contentString) will not alert what I expect and It's to do with closures but I actually have never come across such code before. Any chance you could give me a bit of help.
I want to be creating an infowindow with the contentString for the marker that i am adding.

YES, I FIGURED IT OUT
function codeAddress(){
for(a in elements){
(function(a){
var address = elements[a].location;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
addMarker(results[0].geometry.location);
alert(a);
var the_string = generate_string(elements, a);
infowindow[a] = new google.maps.InfoWindow({
content: the_string
});
google.maps.event.addListener(markersArray[a], "click", function() {
infowindow[a].open(map, markersArray[a]);
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
})(a);
}
}
The trick was doing this and i have no idea how it works but it works:
(function(a){
})(a);
I assume that a is the constructor for the function so that it doesnt get created by a variable reference but instead by the actual iterator itself. Oh god i dont know. yippee

I assume you'll see the result of the last iteration in the alert, this is explained in detail in this blog post.
In your case, I would switch around the order of execution: You have an outer loop which calls geocoder.geocode:
for(a in elements) {
var address = elements[a].location;
(function (element) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
doAlert(element);
addMarker(results[0].geometry.location);
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
})(elements[a]);
}
With function doAlert:
var doAlert = function(element) {
var contentString = '<table>';
for(b in element.other_fields){
var current = element.other_fields[b];
switch(current.type){
case "text":
contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].value + "</td></tr>";
break;
case "date":
if(!current.values[0].end){
var end_date_output_string = "";
}else{
var end_date_output_string = " -> " + current.values[0].end;
}
contentString += "<tr><td class = 'the_title'>" + current.label + ":</td><td class = 'the_value'>" + current.values[0].start + end_date_output_string + "</td></tr>";
break;
}
}
contentString += "</table>";
contentString += "<input type = 'button' onclick = 'window.open(\"" + elements[a].url + "\");' value = 'Open in Podio'>";
alert(contentString);
}