I've a php file that generates a map (GoogleMap). If I run it independently (http://localhost/domain/map.php) it works properly.
But when I try to display it via Ajax call it displays all the map.php content less the map.
$.ajax({
type:"post",
url:"map_generator.php",
data:{label1:data1},
success: function (response) {
$('#map-section').html(response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error');
}
});
I also tried with 'complete' function instead of 'success' but still not working.
All hints are welcomed.
Thank you
EDITED
My map.php
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
var coords = [{
0: "45.648110",
1: "11.497398",
2:"Title 1"
}, {
0: "45.511180",
1: "11.511070",
2:"Title 2"
},{
0: "45.803245",
1: "11.355629",
2:"Title 3"
}];
var geocoder;
var map;
var mapCenter = new google.maps.LatLng(coords [0][0], coords [0][1]);
function initialize() {
//Google map option
var googleMapOptions =
{
center: mapCenter, // map center
zoom: 7, //zoom level, 0 = earth view to higher value
panControl: true, //enable pan Control
zoomControl: true, //enable zoom control
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL //zoom control size
},
scaleControl: true, // enable scale control
mapTypeId: google.maps.MapTypeId.ROADMAP // google map type
};
map = new google.maps.Map(document.getElementById("map"), googleMapOptions);
var marker = new google.maps.Marker({
position: mapCenter,
map: map
});
var infowindow = new google.maps.InfoWindow({
content:"¡Hello World!"
});
infowindow.open(map,marker);
update(coords )
}
function update(markers) {
var infowindow = new google.maps.InfoWindow(),
marker, i;
for (i = 0; i < markers.length; i++) {
var lat = markers[i][0];
var lng = markers[i][1];
var title = markers[i][2];
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
google.maps.event.addListener(marker, 'click', (function(marker, lat, lng) {
return function() {
infowindow.setContent(lat + " " + lng);
infowindow.open(map, marker);
}
})(marker, lat, lng));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div class="map" id="map" style="margin:0 auto; width:500px; height:500px; border:1px solid #ff0000">
</body>
</html>
And this is the file that calls the map.php
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/plugins.js"></script>
<script type="text/javascript" src="js/informe.js"></script>
</head>
<body>
Get map
<div id="map-section" style="position:relative; border:1px solid;width:600px; height:600px;"></div>
<script>
function getMap(){
$(document).ready(function(){
$.ajax({
type:"post",
url:"map.php",
data:{region:"algo"},
success: function (response) {
$('#map-section').html(response);
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error');
}
});
});
}
</script>
</body>
</html>
Related
I have a google map and I would like to add a new marker on my database with it latitude and longitude but it's not working and i found some error
"Uncaught SyntaxError: missing ) after argument list" pleses tell me. Thank for helping.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var mapOptions = {
center: {lat: 13.847860, lng: 100.604274},
zoom: 10,
}
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker, info;
$.getJSON( "jsondata.php", funtion(jsonObj){
$.each(jsonObj, function(i, item){
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: maps,
});
info = new google.maps.Infowindow();
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
info.setContent(item.name);
info.open(maps, marker);
}
})(marker, i));
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6oLvZzDHD-qxeX3g17_uHQMWXFXCxU30&callback=initMap">
</script>
</body>
</html>
and my connect file
<?php
header('Content-Type: application/json');
$objConnect = mysqli_connect("localhost","root","root","username-databasename");
$strSQL = "SELECT * FROM markers ";
$objQuery = mysqli_query($objConnect,$strSQL);
$resultArry = arry();
while($obResult = mysql_fetch_assoc($objQuery))
{
array_push($resultArray,$obResult);
}
echo json_encode($resultArray);
?>
https://i.stack.imgur.com/CLvCe.png
Error on Line 24. It should be like this:
$.getJSON( "jsondata.php", funtion(jsonObj)){
Solution:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<style>
#map {
height: 400px;
width: 100%;
}
</style>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div id="map"></div>
<script>
function initMap() {
var mapOptions = {
center: {lat: 13.847860, lng: 100.604274},
zoom: 10,
}
var map = new google.maps.Map(document.getElementById('map'),mapOptions);
var marker, info;
$.getJSON( "jsondata.php", function( jsonObj ) {
$.each(jsonObj, function(i, item){
marker = new google.maps.Marker({
position: new google.maps.LatLng(item.lat, item.lng),
map: maps,
});
info = new google.maps.Infowindow();
google.maps.event.addListener(marker, 'click', (function(marker, i){
return function() {
info.setContent(item.name);
info.open(maps, marker);
}
})(marker, i));
});
});
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA6oLvZzDHD-qxeX3g17_uHQMWXFXCxU30&callback=initMap">
</script>
</body>
</html>
I have this code of google map with coordinates values
the questions is how we can merge the text field of Lat & Lon into one field only,
so we need one text field only display the coordinated (Lat,Lon)
can any one help
the code is below
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?
sensor=false"></script>
<br />
Copy this number and past it in GPS field
<br />
<br />
<input id="divLon" type="text" />
<input id="divLat" type="text" />
<br />
<br />
<div id="map_canvas" style="width: 600px; height: 600px;"></div>
<script type="text/javascript">
var marker;
function initialize() {
var lat;`enter code here`
var lon;
navigator.geolocation.getCurrentPosition(function (location) {
lat = location.coords.latitude;
lon = location.coords.longitude;
var city = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 15,
center: city,
mapTypeId:
google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById
("map_canvas"), mapOptions);
var image = "icon.png";
marker = new google.maps.Marker({
position: city,
map: map,
draggable: true,
icon: image
});
google.maps.event.addListener(marker, 'position_changed',
function (event) {
update();
});
update();
}, function (positionError) {
alert("getCurrentPosition failed: " + positionError.message);
}, { enableHighAccuracy: true });
};
google.maps.event.addDomListener(window, "load", initialize);
function update() {
var lonlan = marker.getPosition();
var divLon = document.getElementById ("divLon");
var divLat = document.getElementById ("divLat");
divLat.value = lonlan.lat ();
divLon.value = lonlan.lng ();
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfpx62iYkjhpz0J-
vu4Zz96vtWE2TFzQs&signed_in=true&callback=initMap"></script>
</body>
</html>
Try this code:
function update() {
var lonlan = marker.getPosition();
var divLat = document.getElementById ("divLat");
divLat.value = lonlan.lat ()+", "+lonlan.lng ();
}
Simplest solution, use the .toUrlValue method of a google.maps.LatLng
function update() {
var lonlan = marker.getPosition();
var divLatLon = document.getElementById("divLatLon");
divLatLon.value = lonlan.toUrlValue(6);
}
code snippet:
var marker;
function initialize() {
var lat;
var lon;
navigator.geolocation.getCurrentPosition(function(location) {
lat = location.coords.latitude;
lon = location.coords.longitude;
var city = new google.maps.LatLng(lat, lon);
var mapOptions = {
zoom: 15,
center: city,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById
("map_canvas"), mapOptions);
var image = "icon.png";
marker = new google.maps.Marker({
position: city,
map: map,
draggable: true,
icon: image
});
google.maps.event.addListener(marker, 'position_changed',
function(event) {
update();
});
update();
}, function(positionError) {
alert("getCurrentPosition failed: " + positionError.message);
}, {
enableHighAccuracy: true
});
};
google.maps.event.addDomListener(window, "load", initialize);
function update() {
var lonlan = marker.getPosition();
var divLatLon = document.getElementById("divLatLon");
divLatLon.value = lonlan.toUrlValue(6);
}
html,
body,
#map_canvas {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}
<script src="https://maps.googleapis.com/maps/api/js"></script>
<input id="divLatLon" />
<div id="map_canvas"></div>
I have added navbar on a google map page that fetches data from external json file and it is not displaying the map correctly.Also,it says that empty string is passed in getelementbyID in jquery mobile file.Is there a way to fix this?
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas {height: 100%;margin:5% }
</style>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=something&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(43.66207, -79.37617),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$.getJSON('bikeshare.json', function(data) {
$.each( data.stationBeanList, function(i, value) {
var locationLatLong = new google.maps.LatLng(value.latitude, value.longitude);
var marker = new google.maps.Marker({
position: locationLatLong,
map: map,
icon:"img/bike.png",
title:"Bikes available: "+JSON.stringify(value.availableBikes)
});
var infoWindow = new google.maps.InfoWindow({
content:"Docks Available: "+JSON.stringify(value.availableDocks)
});
google.maps.event.addListener(marker, "click", function() {
infoWindow.open(map, marker);
});
});
});
}
</script>
</head>
<body onload="initialize()">
<div data-role="header" >
<h3>BIKESHARE</h3>
<div data-role="navbar" data-position="fixed">
<ul>
<li>Home </li>
<li><a>Reports</a></li>
<li>Locations</li>
<li>Map</li>
</ul>
</div>
</div>
<div data-role="content" id="map_canvas" ></div>
</body>
</html>
This is a CSS issue.
Change this:
#map_canvas {height: 100%;margin:5% }
to:
#map_canvas {height:700px; margin:5%}
Or an alternative would be to calculate a new height and set it before calling the initialize() function:
//Add this line or something similar which calculate div height in the initialize function
$('#map_canvas').css('height', ($(window).height()-10) + 'px');
New Function
function initialize() {
$('#map_canvas').css('height', ($(window).height() - 10) + 'px');
var myOptions = {
center: new google.maps.LatLng(43.66207, -79.37617),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
$.getJSON('bikeshare.json', function (data) {
$.each(data.stationBeanList, function (i, value) {
var locationLatLong = new google.maps.LatLng(value.latitude, value.longitude);
var marker = new google.maps.Marker({
position: locationLatLong,
map: map,
icon: "img/bike.png",
title: "Bikes available: " + JSON.stringify(value.availableBikes)
});
var infoWindow = new google.maps.InfoWindow({
content: "Docks Available: " + JSON.stringify(value.availableDocks)
});
google.maps.event.addListener(marker, "click", function () {
infoWindow.open(map, marker);
});
});
});
}
I have a Google maps that plot multiple markers i need to have click events for the markers to display the pop ups, which the following code does with info window but i want to use Jquery ui pop dialog instead of the info window. the pop up must display info from a div that has style property displayed to None can someone assist with that pls im struggling.
enter code here
<script>
var myCenter=new google.maps.LatLng(51.508742,-0.120850);
function initialize()
{
var mapProp = {
center:myCenter,
zoom:5,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker=new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hello World!"
});
google.maps.event.addListener(marker, 'click', function() {
$("#mypopup").dialog();
//infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
<div id="mypopup" style="display:none"> <div>
</body>
</html>
Try this: http://jsfiddle.net/lotusgodkk/x8dSP/3525/
JS:
var myCenter = new google.maps.LatLng(51.508742, -0.120850);
function initialize() {
var mapProp = {
center: myCenter,
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
var marker = new google.maps.Marker({
position: myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content: "Hello World!"
});
google.maps.event.addListener(marker, 'click', function () {
console.log('clicked')
//$("#mypopup").dialog();
var dialog = $("#mypopup").dialog({
buttons: {
"Yes": function () {
alert('you chose yes');
},
"No": function () {
alert('you chose no');
},
"Cancel": function () {
dialog.dialog('close');
}
}
});
//infowindow.open(map,marker);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
HTML:
<div id="googleMap"></div>
<div id="mypopup">Hello</div>
CSS:
#googleMap {
height: 380px;
width: 500px;
}
#mypopup {
display:none;
}
I'm new to both Google Maps and Javascript but have to get this issue solved! I have an .html file with a google map of our client's location loaded into the map_canvas div. Through tutorials, I have been able to figure out how to write enough Javascript to get the map to function, have a custom marker and and infowindow that pops up when you click on it. The only part left is to have a link inside the infowindow that says "directions to here" and there's a text field that the user can type in their starting address. I'm seeing plenty of documentation to help me write my own code on the Google Developer's site but I am not advanced enough to do this. Can anyone help me figure out how to do this? Here is my Javascript:
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize()
{
var latlng = new google.maps.LatLng(33.929011, -84.361);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(33.929011, -84.361),
map: map,
title: 'Atlanta/Sandy Springs',
clickable: true,
icon: 'images/mapmarker.png'
});
var infowindow = new google.maps.InfoWindow({
content: 'client address'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
}
</script>
There are several pieces I added. First, you need a better HTML form inside the infowindow, since I only put in the basic parts and it won't respond when you press Enter.
Next, I added a geocoder because the directions Service won't take "human readable" addresses, only latLng coordinates. The geocoder converts the two. Finally, the directions Service and Display are added. The directions text goes into a div (directionsPanel).
See the working fiddle or use this code:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%
}
#map_canvas {
margin: 0;
padding: 0;
width: 50%;
height: 100%
}
#directionsPanel {
position: absolute;
top: 0px;
right: 0px;
width: 50%
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var geocoder;
var directionsService;
var directionsDisplay;
function initialize() {
var latlng = new google.maps.LatLng(33.929011, -84.361);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: new google.maps.LatLng(33.929011, -84.361),
map: map,
title: 'Atlanta/Sandy Springs',
clickable: true
});
var infowindow = new google.maps.InfoWindow({
content: "Your address: <input id='clientAddress' type='text'>"+
"<input type='button' onClick=getDir() value='Go!'>"
});
google.maps.event.addListener(marker, 'click', function () {
infowindow.open(map, marker);
});
geocoder = new google.maps.Geocoder();
directionsService = new google.maps.DirectionsService();
directionsDisplay = new google.maps.DirectionsRenderer({
suppressMarkers: false
});
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel"));
}
function getDir() {
geocoder.geocode({
'address': document.getElementById('clientAddress').value
},
function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var origin = results[0].geometry.location;
var destination = new google.maps.LatLng(33.929011, -84.361);
var request = {
origin: origin,
destination: destination,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
} else {
document.getElementById('clientAddress').value =
"Directions cannot be computed at this time.";
}
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
<div id="directionsPanel"></div>
</body>
</html>