I'm trying to find out why my google map is not showing up. I did not create the original code. What is causing the error and my google map to disappear?

//XXXX: openInfoWindowHtml
/*--------------------------------------------------*/
/*	GOOGLE MAP FUNCTIONS
/*--------------------------------------------------*/

var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon;
var infoWindow = new google.maps.InfoWindow();

function initAgentMap(lat, lng) {
	lat = isNaN(lat) || lat === null ? 37.4419 : lat;
	lng = isNaN(lng) || lat === null ? -122.1419 : lng;
	map = new google.maps.Map(document.getElementById("map-canvas"), {
        center : new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions : {
	        style : google.maps.ZoomControlStyle.SMALL
	    }
	});
	agentMarkers = [];
	reoMarkers = [];
	currentMarker = null;
	bounds = new google.maps.LatLngBounds();

	var baseIcon = {
	    size : new google.maps.Size(29,25),
	    anchor : new google.maps.Point(15,25),
	    imageMap : [0, 0, 22, 0, 22, 25, 0, 25]
	};

	agentIcon = {
	    size : baseIcon.size,
	    anchor : baseIcon.anchor,
	    imageMap : baseIcon.imageMap,
	    url : "/images/icon_redbook.png"
    };

	reoIcon = {
	    size : baseIcon.size,
	    anchor : baseIcon.anchor,
	    imageMap : baseIcon.imageMap,
	    url : "/images/icon_reo.png"
	};

	officeIcon = {
        size : baseIcon.size,
        anchor : baseIcon.anchor,
        imageMap : baseIcon.imageMap,
        url : "/images/icon_office.png"
	};
}

function plotAgent(lat, long, text, id) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : agentIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function() {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	agentMarkers[id] = marker;
	bounds.extend(point);
	return marker;
}

function plotREO(lat, long, text, id) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : reoIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function () {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	reoMarkers[id] = marker;
	bounds.extend(point);
	return marker;
}

function plotOffice(lat, long, text) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : officeIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function () {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	officeMarker = marker;
	bounds.extend(point);
	return marker;
}

function showAgent(id) {
	if(currentMarker != id){
		currentMarker = id;
		google.maps.event.trigger(agentMarkers[id], "click");
		map.setZoom(11);
		pnt = agentMarkers[id].getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}

}

function showREO(id) {
	if(currentMarker != id){
		currentMarker = id;
		google.maps.event.trigger(reoMarkers[id], "click");
		map.setZoom(11);
		pnt = reoMarkers[id].getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}
}

function showOffice() {
	if(currentMarker != 'office'){
		currentMarker = 'office';
		google.maps.event.trigger(officeMarker, "click");
		map.setZoom(11);
		pnt = officeMarker.getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}
}

I'm trying to find out why my google map is not showing up. I did not create the original code. What is causing the error and my google map to disappear?

//XXXX: openInfoWindowHtml
/*--------------------------------------------------*/
/*	GOOGLE MAP FUNCTIONS
/*--------------------------------------------------*/

var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon;
var infoWindow = new google.maps.InfoWindow();

function initAgentMap(lat, lng) {
	lat = isNaN(lat) || lat === null ? 37.4419 : lat;
	lng = isNaN(lng) || lat === null ? -122.1419 : lng;
	map = new google.maps.Map(document.getElementById("map-canvas"), {
        center : new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions : {
	        style : google.maps.ZoomControlStyle.SMALL
	    }
	});
	agentMarkers = [];
	reoMarkers = [];
	currentMarker = null;
	bounds = new google.maps.LatLngBounds();

	var baseIcon = {
	    size : new google.maps.Size(29,25),
	    anchor : new google.maps.Point(15,25),
	    imageMap : [0, 0, 22, 0, 22, 25, 0, 25]
	};

	agentIcon = {
	    size : baseIcon.size,
	    anchor : baseIcon.anchor,
	    imageMap : baseIcon.imageMap,
	    url : "/images/icon_redbook.png"
    };

	reoIcon = {
	    size : baseIcon.size,
	    anchor : baseIcon.anchor,
	    imageMap : baseIcon.imageMap,
	    url : "/images/icon_reo.png"
	};

	officeIcon = {
        size : baseIcon.size,
        anchor : baseIcon.anchor,
        imageMap : baseIcon.imageMap,
        url : "/images/icon_office.png"
	};
}

function plotAgent(lat, long, text, id) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : agentIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function() {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	agentMarkers[id] = marker;
	bounds.extend(point);
	return marker;
}

function plotREO(lat, long, text, id) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : reoIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function () {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	reoMarkers[id] = marker;
	bounds.extend(point);
	return marker;
}

function plotOffice(lat, long, text) {
	var point = new google.maps.LatLng(lat, long);
	var marker = new google.maps.Marker({
	    position : point,
	    icon : officeIcon,
	    anchorPoint : new google.maps.Point(12,0),
	    map : map
	});
	google.maps.event.addListener(marker, "click", function () {
		infoWindow.setContent(text);
		infoWindow.open(map, marker);
	});
	officeMarker = marker;
	bounds.extend(point);
	return marker;
}

function showAgent(id) {
	if(currentMarker != id){
		currentMarker = id;
		google.maps.event.trigger(agentMarkers[id], "click");
		map.setZoom(11);
		pnt = agentMarkers[id].getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}

}

function showREO(id) {
	if(currentMarker != id){
		currentMarker = id;
		google.maps.event.trigger(reoMarkers[id], "click");
		map.setZoom(11);
		pnt = reoMarkers[id].getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}
}

function showOffice() {
	if(currentMarker != 'office'){
		currentMarker = 'office';
		google.maps.event.trigger(officeMarker, "click");
		map.setZoom(11);
		pnt = officeMarker.getPosition();
		pnt2 = new google.maps.LatLng(pnt.lat() + .02 , pnt.lng());
		map.setCenter(pnt2);
	}
}

I'm trying to find out why my google map is not showing up. I did not create the original code. What is causing the error and my google map to disappear?

• javascript
• google-maps
• google-maps-api-3

• 1 It's hard to give an answer based on the given code(we don't know the arguments that will be used for the function-calls). Can you give a link to the page? – Dr.Molle Commented Jun 22, 2015 at 22:35
• 1 From the error message Uncaught InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number, you are passing invalid values in to a setPosition method somewhere. Please provide a Minimal, Complete, Tested and Readable example that demonstrates the issue. – geocodezip Commented Jun 22, 2015 at 22:41
• Here's a link to the page and reoredbook.thefivestar./find-an-agent/search-results – jharper Commented Jun 22, 2015 at 23:34
• A plete page is not a minimal plete example. – geocodezip Commented Jun 23, 2015 at 0:08

2 Answers 2

The only issue seems to be the URL of the maps-API, load the API from the correct URL (as defined in the documentation) :

<script type="text/javascript" 
        src="https://maps.googleapis./maps/api/js?v=3&amp;key=AIzaSyDgNW8A9SvxtI0DazJOJ7x652I2BdhWxdg"></script>

You have provided some random javascript functions. To make a map you will need: 1) to include google maps API. 2) to define a location for map on html page 2) define map size 3) initialize map, after Windows load event is plete.

For fun, I kept hacking your code until it gave some results. This may give you some hints of where you went astray . I strongly remend reading API documentation and reproducing examples. https://developers.google./maps/documentation/javascript/examples/map-simple

<html>
<script src="http://maps.googleapis./maps/api/js" type="text/javascript"></script>           


<style>
    /* we need to define map size */
    #map-canvas {        
        height: 350px;
        width: 600px;        
    }
</style>    
<script>

var map, agentMarkers, reoMarkers, officeMarker, currentMarker, bounds, agentIcon, reoIcon, officeIcon;
var infoWindow = new google.maps.InfoWindow();

function initialize(){
    initAgentMap(37,-122)
    var marker = plotAgent(37, -122, 'hello world', 1);
    marker.setMap(map); }

function initAgentMap(lat, lng) {
    lat = isNaN(lat) || lat === null ? 37.4419 : lat;
    lng = isNaN(lng) || lat === null ? -122.1419 : lng;
    map = new google.maps.Map(document.getElementById("map-canvas"), {  
        center : new google.maps.LatLng(lat, lng),
        zoom: 13,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoomControlOptions : {
            style : google.maps.ZoomControlStyle.SMALL
        }
    });
}

function plotAgent(lat, lng, text, id) {
    var point = new google.maps.LatLng(lat, lng);
    var marker = new google.maps.Marker({
        position : point,
        title: text, // Appears on hover
        label: id, // Latter on marker      
    });
    return marker;
}

// don't start the process until Windows "load" event is pleted
google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>