Why Google map did not appear on the website?

Question

1.00/5 (1 vote)

See more:

Hello, I have issue with google maps api. I need to fix the error in the website where the google map should be there beside the criteria search but it did not appear. I don't what wrong whether the code or the api. You can see the error at the website:https://pmspk.moe.gov.my/directory/ . Below is the code:

<!DOCTYPE html>
<!--[if lt IE 9]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://maps.google.com/maps/api/js?key=AIzaSyBJdW-MjFSmTRwAMv8l2_fQT-LxRiepR6s&libraries=geometry&?1343675510"></script>
<script type="text/javascript" src="js/maplace.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.9.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
	/*
	$('#controls').on('change', function() {
	  showGroup(this.value);//alert(  ); // or $(this).val()
	});
	$('#negeri').on('change', function() {
	  showGroupState(this.value);//alert(  ); // or $(this).val()
	});
*/
var maplace = new Maplace({
	map_div: '#gmap-mixed',
	controls_div: '#searchSekolah',
	controls_type: 'dropdown',
	controls_on_map: true
});

/*
function showGroup(index) {
	$.getJSON('data/ajax.php', { view:'sekolah', type: index  }, function(data) {
		maplace.Load({
			locations: data.points,
			view_all_text: data.title,
			type: data.type,
        	force_generate_controls: true,
        	map_options: {
		        zoom: 1
		      }
		});
	});
}

function showGroupState(index) {
	$.getJSON('data/ajax.php', { view:'negeri', type: index }, function(data) {
		maplace.Load({
			locations: data.points,
			view_all_text: data.title,
			type: data.type,
        	force_generate_controls: true,
        	map_options: {
		        zoom: 1
		      }
		});
	});
}
*/
function showGroupNew(i,j) {
	$.getJSON('data/ajax.php', { view:i, type: j }, function(data) {
		if(data.title == 'No entries found'){
			alert('no entries found');
			maplace.Load({
				locations: [
							{
			        lat: '3.463926',
			        lon: '107.528700',
			        //title: 'Title',
			        //html: 'Content',
			        zoom: 6,
			        //animation: google.maps.Animation.DROP
			    }],
				show_markers: false,
				view_all: false,
	        	map_options: {
			        zoom: 1
			      }
			});
		} else {
			maplace.Load({
				locations: data.points,
				view_all_text: data.title,
				show_markers: true,
				type: data.type,
	        	force_generate_controls: true,
	        	map_options: {
			        zoom: 6
			      }
			});
		}
		
	});
}

function showOne(index) {
	//alert(index);
	$.getJSON('data/search.php', { namasekolah:index }, function(data) {
		//alert(data.sql);
		maplace.Load({
			locations: data.points,
			view_all_text: data.title,
			type: data.type,
        	force_generate_controls: true,
        	map_options: {
		        zoom: 12
		      }
		});
	});
}
//showGroup(1);
showGroupNew('2', 'WP PUTRAJAYA');


	var availableTags =  <?echo json_encode($data)?>;

	$( "#searchSekolah" ).submit(function( event ) {

  		showGroupNew($( "#controls" ).val(), $( "#negeri" ).val());
  		event.preventDefault();
	});
	$( "#searchSekolah2" ).submit(function( event ) {

  		showOne($( "#institutionName" ).val());
  		event.preventDefault();
	});

	$( "#institutionName" ).autocomplete({
      source: availableTags
      
    });
});


</script>
<style>
.gmap-mixed{width: 100%; height: 490px;}
.gmap_controls{visibility: hidden;}
table{border:0; width: 100%; margin: 0; padding: 0}
body{padding: 0; margin: 0}
.searcharea{padding:10px;}
.ui-autocomplete-loading {
    background: white url('images/ui-anim_basic_16x16.gif') right center no-repeat;
  }
</style>

<?
	if($_GET["lang"]==""){
		$jenisInstitusi = "Jenis Institusi";
		$preschool = "Pra Sekolah";
		$primaryschool = "Sekolah Rendah";
		$secondaryschool = "Sekolah Menengah";

		$negeri = "Negeri";

		$search = "Cari";

		$or  = "Atau";

		$institutionname = "Nama Institusi";
	} else {
		$jenisInstitusi = "Institution Type";
		$preschool = "Preschool";
		$primaryschool = "Primary School";
		$secondaryschool = "Secondary School";

		$negeri = "State";

		$search = "Search";

		$or  = "Or";

		$institutionname = "Institution Name";
	}
	
?>

</head>
<body>
<table cellspacing="0" cellpadding="0">
<tr><td width="25%" valign="top" class="searcharea">
<form id="searchSekolah">
<? echo $jenisInstitusi?>:<br />
<select id="controls">
	<option value="1"><? echo $preschool?></option>
	<option value="2"><? echo $primaryschool?></option>
	<option value="3"><? echo $secondaryschool?></option>
</select>
<br /><br />
<? echo $negeri?>:<br />
<select id="negeri">
	<option value="KELANTAN">Kelantan</option>
	<option value="SABAH">Sabah</option>
	<option value="WP KUALA LUMPUR">Wilayah Persekutuan (Kuala Lumpur)</option>
	<option value="PERLIS">Perlis</option>
	<option value="SARAWAK">Sarawak</option>
	<option value="MELAKA">Melaka</option>
	<option value="Terengganu">Terengganu</option>
	<option value="SELANGOR">Selangor</option>
	<option value="KEDAH">Kedah</option>
	<option value="PAHANG">Pahang</option>
	<option value="PERAK">Perak</option>
	<option value="WP PUTRAJAYA">Wilayah Persekutuan (Putrajaya)</option>
	<option value="PULAU PINANG">Pulau Pinang</option>
	<option value="NEGERI SEMBILAN">Negeri Sembilan</option>
	<option value="JOHOR">Johor</option>
	<option value="PULAU PINANG">Pulau Pinang</option>
	
</select>
<br />
<input type="submit" value="<? echo $search?>" />
</form>
<br />
<? echo $or?>,
<br /><br />
<form id="searchSekolah2">

<? echo $institutionname?> :<br />

<input id="institutionName">
<input type="submit" value="<? echo $search?>" />


</form>
</td>
<td><div class="gmap-mixed" id="gmap-mixed"></div></td></tr>
</table>


</body>
</html>

What I have tried:

- I have update the google maps api version

Posted 10-Nov-17 6:54am

MUHAMMAD HARITH

Updated 14-Nov-17 15:15pm

Add a Solution

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

BildaPR · Answer 1 · 2017-11-13T09:19:00

Solution 1

Sorry, but your website is not working right now. I would suppose to check javascript errors that Google Maps trigger.

Posted 13-Nov-17 9:19am

BildaPR

Comments

MUHAMMAD HARITH 13-Nov-17 20:45pm

The website is working for me right now. So I don't know what's wrong with google map. Maybe you can try this link: https://pmspk.moe.gov.my/home/ and go to directory tab.

MUHAMMAD HARITH · Answer 2 · 2017-11-14T15:14:00

Solution 2

I have solve this problem. Thank you

Posted 14-Nov-17 15:14pm

MUHAMMAD HARITH