I use this script to get the markers for Google Maps with JSON.
It is not working because I need to receive the boundary in the Json script like this:
$swLat=$_GET["swLat"];
$swLon=$_GET["swLon"];
$neLat=$_GET["neLat"];
$neLon=$_GET["neLon"];
That is where I need your help.
Google maps script
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="http://skiweather.eu/gmap3/js/jquery.ui.map.js"></script>
<script language="javascript" type="text/javascript">
var map = null;
map = new google.maps.Map(document.getElementById("map"));
var markers = new Array();
var bounds = map.getBounds();
var zoomLevel = map.getZoom();
$(function() {
demo.add(function() {
$('#map').gmap().bind('init', function() {
$.getJSON( 'http://skiweather.eu/gmap3/markers/index.php', {zoom: zoomLevel,
swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(),
neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()}, function(data) {
$.each( data.markers, function(i, marker) {
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true
}).click(function() {
$('#map').gmap('openInfoWindow', { 'content': marker.content }, this);
});
});
});
});
}).load();
});
</script>
</head>
<body>
<div id="map"></div>
The jQuery/gmap-part of your code will not be executed at all.
Fixed code:
<script type="text/javascript">
$(function() {
$('#map').gmap().bind('init', function() {
var markers = new Array();
var bounds = $(this).gmap('get','map').getBounds();
var zoomLevel = $(this).gmap('get','map').getZoom();
$.getJSON( 'http://skiweather.eu/gmap3/markers/index.php', {zoom: zoomLevel,
swLat: bounds.getSouthWest().lat(), swLon: bounds.getSouthWest().lng(),
neLat: bounds.getNorthEast().lat(), neLon: bounds.getNorthEast().lng()}, function(data) {
$.each( data.markers, function(i, marker) {
$('#map').gmap('addMarker', {
'position': new google.maps.LatLng(marker.latitude, marker.longitude),
'bounds': true
}).click(function() {
$('#map').gmap('openInfoWindow', { 'content': marker.content }, this);
});
});
});
});
});
</script>
However, it's sending the data now, but it's still not working, because the server will not give any response(are you sure that there is a webservice that returns JSON-data?)
Related
I want to display data from MySQL with vis.js.
I get data with JSON, but I am having this error:
Error: Node must have an id
throw new Error("Node must have an id");
-------^
function tampil()
{
$.ajax({
type:"GET",
cache :false,
dataType: "json",
url:"fetch.php",
success: function(data){
console.log(data);
var vertex = new vis.DataSet([
{id:data[0], label:data[1]}
]);
var hubung = new vis.DataSet([
{from:data[2], to:data[3]}
]);
var myDiv = document.getElementById("media");
var data = {
nodes : vertex,
edges : hubung
}
var options = {};
var network = new vis.Network(myDiv,data,options);
}
});
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/vis.js"></script>
<script type="text/javascript" src="js/jquery-2.1.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/vis.css" />
</head>
<body>
<button type="button" onclick="tampil()">proses</button>
<div id="media" style="width:500px;height:500px;"></div>
</body>
</html>
and my server sid like this
solved, in JavaScript I've added the following code:
function tampil()
{
$.ajax({
type:"GET",
cache :false,
dataType: "json",
url:"nodes.php",
success: function(data){
console.log(data);
var vertex = new vis.DataSet();
var hubung = new vis.DataSet();
var myDiv = document.getElementById("media");
var data = {
nodes : vertex,
edges : hubung
}
var options = {};
var network = new vis.Network(myDiv,data,options);
$.getJSON('edges.php', function(edges) {
hubung.add(edges);
});
$.getJSON('nodes.php', function(nodes) {
vertex.add(nodes);
});
}
});
}
When I add js/jquery.mobile-1.4.5.min.js library all above jquery are not working only this jquery.mobile-1.4.5.min.js jquery working and navigation stop its work. So how to short out this jquery list to work all in proper way.
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/stickUp.min.js" type="text/javascript"></script>
<script src="js/colorbox/jquery.colorbox-min.js" type="text/javascript"> </script>
<!-- templatemo 395 urbanic -->
<script src="js/templatemo_script.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
<script>
$(document).ready(function () {
$(".anchor_img").click(function (e) {
//$('#overlay_form, #overlay-back').fadeIn(500);
var targetPopup = $(this).attr('id');
$("#hidden_id").attr('value',targetPopup);
$.ajax({
type: "POST",
url: "popup.php?id="+targetPopup,
dataType : 'json',
data: $('#myform').serialize(), // serializes the form's elements.
success: function(data)
{
//$(".overlay_form").fadeIn(1000);
//$(".overlay_form").html(data);
//$.each(data.employees, function(key, value){
//$(".overlay_form").load(data);
//$('.overlay_form').html(data);
//console.log(data);
$(".overlay_form").fadeIn();
$(".cover").fadeTo(500, 0.8);
$("#id>img").attr("src",data.fullpath);
$("#popup_img_id").attr("value",data.id);
console.log(data.fullpath);
//$("#cboxOverlay").show();
//});
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
//close popup
$(".close").click(function () {
$(".overlay_form").fadeOut();
$(".cover").fadeOut();
});
$('body').click(function(e) {
if (!$(e.target).closest('.overlay_form').length){
$(".overlay_form").fadeOut();
$(".cover").fadeOut();
}
});
});
//maintain the popup at center of the page when browser resized
//$(window).bind('resize', positionPopup);
</script>
<script>
$("#popup_submit").click(function (e) {
var pname = $("#popup_user_name").attr('value');
var pmobile = $("#popup_user_mobile").attr('value');
var pcomment = $("#popup_user_comment").attr('value');
if(pname == "")
{
alert("Plz Enter Your Name");
return false;
}
if(pmobile == "")
{
alert("Plz Enter Your Mobile");
return false;
}
if(pcomment == "")
{
alert("Plz Enter Your Comment");
return false;
}
$.ajax({
type: "POST",
url: "popup_msg.php",
dataType : 'json',
data: $('#myform_popup').serialize(), // serializes the form's elements.
success: function(data)
{
alert("Message Sent !");
$("#popup_user_name").val("");
$("#popup_user_mobile").val("");
$("#popup_user_comment").val("");
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
<script>
$("#popup_user_mobile").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
$("#user_mobile").keypress(function (e) {
//if the letter is not digit then display error and don't type anything
if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) {
//display error message
$("#contact_errmsg").html("Digits Only").show().fadeOut("slow");
return false;
}
});
</script>
It's impossible to say for sure what all conflicts you may be experiencing, but a likely problem is the fact you are including jQuery twice. I would suggest reworking your script includes so that you only pull in jQuery a single time. This may probably work, but it depends on your script version requirements:
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<script src="js/stickUp.min.js" type="text/javascript"></script>
<script src="js/colorbox/jquery.colorbox-min.js" type="text/javascript"> </script>
<!-- templatemo 395 urbanic -->
<script src="js/templatemo_script.js" type="text/javascript"></script>
<script src="js/jquery.mobile-1.4.5.min.js"></script>
The only change I made was removing <script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>, which was inserted right before you included jQuery mobile, since you already included jQuery on the first line.
I've created a controller & view as follows - I am trying to loop through the jSON object - can anyone assist?
Can anyone demonstrate how to loop through the json object in the view?
//Controller PHP function:
public function ajax_get_all()
{
$stockists = $this->stockists_model->get_all();
header('Content-type: application/json');
echo json_encode($stockists);
}
//HTML View
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// Stuff to do as soon as the DOM is ready;
$.getJSON("/stockists/ajax_get_all", function(data) {
var obj = jQuery.parseJSON(data);
//console.log(obj);
});
});
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
// Stuff to do as soon as the DOM is ready;
$.getJSON("/stockists/ajax_get_all", function(data) {
$.each(data, function(key,value){
console.log(key);
console.log(value);
});
//var obj = jQuery.parseJSON(data);
//console.log(obj);
});
});
I've got the following code to get some Javascript back from the server:
$.ajax({
url: '<?=base_url()?>index.php/guide/getMap',
success: function(data) {
$('.result').text(data);
alert('Load was performed.');
}
});
This successfully returns the code I want:
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
//<![CDATA[
var map; // Global declaration of the map
var iw = new google.maps.InfoWindow(); // Global declaration of the infowindow
var lat_longs = new Array();
var markers = new Array();
function initialize() {
var myLatlng = new google.maps.LatLng(37.4419, -122.1419);
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function createMarker(markerOptions) {
var marker = new google.maps.Marker(markerOptions);
markers.push(marker);
lat_longs.push(marker.getPosition());
return marker;
}
window.onload = initialize;
//]]>
</script>
My question is, in place of the alert I currently have on the succsufull callback, how can I place this javascript in the body (or head) of the HTML document so that the Google map is displayed? (Note: I will also have another ajax call to return the required html).
The reason I'm not just doing it straight with JS calling the GMaps API is that I need to do some processing on the server to get the appropriate markers from the database to put on the map etc. I am using this library on the server side to generate the js/html needed to display the map.
Instead of having your initialize function be in the middle of nowhere, tie it in with your callback function doing something like:
$.ajax({
url: '<?=base_url()?>index.php/guide/getMap',
success: function(data) {
function initialize() {
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var mapCanvas = document.getElementById("map_canvas");
var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP}
map = new google.maps.Map(mapCanvas, myOptions);
}
}
});
You can of course move things around so they look pretty, or however you like it laid out. The important thing is that you call your initialize function after you get the data back from the map and after your maps API is loaded.
Try this.I Think this will work.Place the below code on bottom of your page:
$.ajax({
url: '<?=base_url()?>index.php/guide/getMap',
success: function(data) {
$('.result').text(data);
initialize();
}
});
I am trying to minimize my code by putting it into an array but nothing happens. I can't figure out what I am doing wrong. Here's the code
<html>
<head>
<title>test</title>
<!-- JavaScript -->
<script src="js/jquery-1.5.2.js" type="text/javascript"></script>
<script type="text/javascript">
var phpfile = new Object();
phpfile["testselect"] = "zoomchange.php";
var elementID = new Object();
elementID["testselect"] = "#testdiv";
$(document).ready(function(){
$("select").change(function() {
$.post(
phpfile[$(this).id()],
$(this).serialize(),
function(data) {
$(elementID[$(this).id()]).html(data)
}
);
});
});
</script>
</head>
<body>
<select id="testselect">
<option value="1">1</option>
<option value="2">2</option>
</select>
<div id="testdiv"></div>
</body>
</html>
here is the zoomchange.php:
<?PHP echo $_REQUEST['testselect'] ; ?>
Your initializers shouldn't look like this:
var phpfile = new Array();
phpfile["testselect"] = "zoomchange.php";
var elementID = new Array();
elementID["testselect"] = "#testdiv";
A JavaScript Array is indexed by numbers, not strings. You want simple object literals:
var phpfile = { testselect: 'zoomchange.php' };
var elementED = { testselect: '#testdiv' };
Then, your POST callback is confused:
function(data) {
$(elementID[$(this).id()]).html(data)
}
this isn't what you think it is when that function is called. You want something more like this:
$("select").change(function() {
var that = this;
$.post(
phpfile[that.id],
$(this).serialize(),
function(data) {
$(elementID[that.id]).html(data);
}
);
});
This
function(data)
{
$(elementID[$(this).id()]).html(data);
}
instead of this
function(data)
{
$(elementID[$(this).id()]).html(data)
}
Is this the error ?
You should do new Object() instead of new Array().
Edit: There are other mistakes, your js code should be this:
<script type="text/javascript">
var phpfile = {};
phpfile["testselect"] = "zoomchange.php";
var elementID = {};
elementID["testselect"] = "#testdiv";
$(document).ready(function(){
$("select").change(function() {
var $select = $(this);
$.post(
phpfile[$select.attr("id")],
$select.serialize(),
function(data) {
$(elementID[$select.attr("id")]).html(data)
}
);
});
});
</script>