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>
Related
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>
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);
});
});
});
}
Edit after help from Roberto:
Python newbie. The app uses Maps Javascript API v3 on the front end. Backend is webapp2/GAE. I'm assuming I'm not doing the json properly either. Markers not created properly after passing the JSON.
q = Building.query()
buildings = q.fetch()
some_json = []
for building in buildings:
some_json.append(OrderedDict([('lat', float(building.lat)), ('lng', float(building.lng)), ('content', building.uuid)]))
appended_json = json.dumps(some_json)
HTML:
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMfzvCXM-LUe43cZ0mB2iDxx4aNOySkrQ">
</script>
<script type="text/javascript">
function initialize() {
var input_value = document.getElementById("lat").value;
var converted_value = JSON.stringify(input_value);
console.log(input_value);
var json = JSON.parse(converted_value);
console.log(json);
var locations = json;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="lat" hidden="hidden" value="{{ appended_json }}">
</body>
</html>
Console outputs the following, if the output is proper and raises no errors:
[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}] viewbuildings:17
[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}]
Even if the output is not proper, it still not raises anything.
Edit:
Exact HTML browser sees is the following
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDMfzvCXM-LUe43cZ0mB2iDxx4aNOySkrQ">
</script>
<script type="text/javascript">
function initialize() {
var input_value = document.getElementById("lat").value;
var converted_value = JSON.stringify(input_value);
console.log(input_value);
var json = JSON.parse(converted_value);
console.log(json);
var locations = json;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][0], locations[i][1]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][2]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map-canvas"></div>
<input id="lat" hidden="hidden" value="[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}]">
</body>
</html>
Your code is expecting your JSON to look like this:
[[39.2831792,-80.56741099999999,"782f7100c13511e49f92ab5e18d4b38e"]]
Your JSON doesn't look like that, it looks like:
[{"lat": 39.2831792,"lng": -80.56741099999999,"content": "782f7100c13511e49f92ab5e18d4b38e"}];
Change the code to process your JSON format:
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i].content);
infowindow.open(map, marker);
}
})(marker, i));
}
You are also using JSON.stringify and JSON.parse incorrectly. The content of your input element is a JSON string, you only need to pass it to JSON.parse to get a JSON object out of it:
working code snippet:
function initialize() {
var input_value = document.getElementById("lat").value;
var json = JSON.parse(input_value);
var locations = json;
var map = new google.maps.Map(document.getElementById('map-canvas'), {
zoom: 10,
center: new google.maps.LatLng(-33.92, 151.25),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
var bounds = new google.maps.LatLngBounds();
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i].lat, locations[i].lng),
map: map
});
bounds.extend(marker.getPosition());
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i].content);
infowindow.open(map, marker);
}
})(marker, i));
}
map.fitBounds(bounds);
}
google.maps.event.addDomListener(window, 'load', initialize);
html,
body,
#map-canvas {
height: 100%;
margin: 0;
padding: 0;
}
<script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=geometry,places&ext=.js"></script>
<div id="map-canvas"></div>
<input id="lat" hidden="hidden" value="[{"lat": 39.2831792, "lng": -80.56741099999999, "content": "782f7100c13511e49f92ab5e18d4b38e"}]">
I have a problem with Google Maps info windows. I have 2 markers and I want to open both info windows by default. But I can't figure out how to do it.
Here is my code:
<html>
<head>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=<key>&sensor=false"></script>
<script type="text/javascript">
var locations = [
['loan 1', 46.166621, 8.853315, '<div style="width:250px">text info 1'],
['loan 2', 46.173000, 8.856315, '<div style="width:250px">text info 2'],
];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(46.166621, 8.853315),
zoom: 15,
mapTypeId: google.maps.MapTypeId.SATELLITE
};
var map = new google.maps.Map(document.getElementById("default"), myOptions);
setMarkers(map,locations);
}
function setMarkers(map,locations){
var marker, i
for (i = 0; i < locations.length; i++) {
var loan = locations[i][0]
var lat = locations[i][1]
var long = locations[i][2]
var add = locations[i][3]
latlngset = new google.maps.LatLng(lat, long);
var marker = new google.maps.Marker({
map: map, title: loan , position: latlngset
});
map.setCenter(marker.getPosition())
var content = add
var infowindow = new google.maps.InfoWindow()
google.maps.event.addListener(marker,'click', (function(marker,content,infowindow){
return function() {
infowindow.setContent(content);
infowindow.open(map,marker);
};
})(marker,content,infowindow));
}
}
</script>
</head>
<body onLoad="initialize()">
<div id="default" style="width:100%; height:100%"></div>
</body>
</html>
I tried adding infowindow.open(map,marker); in various place but stil don't work.
Trigger the click-event for the markers.
Put this at the end of the for-loop:
google.maps.event.trigger(marker,'click',{});
working fiddle
I am trying to call javascript inside google map infoWindow(). I know it's a classic question. I have read a lot of similar question in stackoverflow butI I can't find solution :(
my code:
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
['Bondi Beach', 38.6391,23.3437],
["<scr"+"ipt type='text/javascript'>alert('test');</scr"+"ipt>", 37.893, 23.936999999999998]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>
anyone know how to solved this issue?
Thank you!
EDIT:
The answer of Jonas Grumannis correct.
In fact the javascript that I need to run is to build a cloudword inside infowindow calling TermCloud() function . I try below code. Any idea please???
<!DOCTYPE>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Rectangle Overlay</title>
<style type="text/css">
#map {
width:1200px;
height: 700px;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function init() {
var myOptions = {
center: new google.maps.LatLng(38.122404, 23.862591),
zoom: 3,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map'),myOptions);
var locations = [
['Bondi Beach', 38.6391,23.3437],
["Hello", 37.893, 23.936999999999998]
];
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
//infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
var yourFunction = new YourFunction(locations[i][0])
}
})(marker, i));
}
var YourFunction = function(str) {
this.init = function() {
google.load("visualization", "1");
google.setOnLoadCallback(draw);
}
this.init();
}
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label');
data.addColumn('number', 'Value');
data.addColumn('string', 'Link');
data.addRows(3);
data.setValue(0, 0, 'First Term');
data.setValue(0, 1, 10);
data.setValue(1, 0, 'Second');
data.setValue(1, 1, 30);
data.setValue(1, 2, 'http://www.google.com');
data.setValue(2, 0, 'Third');
data.setValue(2, 1, 20);
var outputDiv = document.getElementById('tcdiv');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<h1>Service</h1>
<h2> Map <h2>
<div id="map"></div>
</script>
</td></tr></table> <div id="chart_div" style="width: 1800px; height: 1100px;"></div> </body>
</html>
Found a solution -- wrap the infoWindow content in a div and add a listener in the 'domready' event for that div's id (see this SO thread):
var infowindow = new google.maps.InfoWindow({
content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});
google.maps.event.addListener(infowindow,'domready',function(){
$('#myInfoWinDiv').click(function() {
//Do your thing
});
});
In my example, a click handler is attached to the div using jQuery. You can put any JS in the domready event handler. It needs to be done in the infoWindow's domready, otherwise you can't be certain that the object has been created.
I think calling a function click listener should work (haven't tested it though):
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
var yourFunction = new YourFunction()
}
})(marker, i));
Then, outside all the google maps stuff
var YourFunction = function() {
this.init = function() {
alert("You have clicked a marker");
}
this.init();
}
What about click event in Google Map API V3?
var infowindow = new google.maps.InfoWindow({
content: '<div id="myInfoWinDiv">'+ myContent +'</div>'
});
google.maps.event.addListener(marker, 'click', function(e){
infowindow.open(map, marker);
// Other stuff goes here...
});