how to get database value into javascript google map - javascript

i know there is the same question like mine but i still don't understand...
i want to make a google map with value in my database
there are 3 value in my database: name, lat, and lon.
and i want to get this value and add this into my javascript.
here is my google map script (stil fresh from w3school) :
<script>
var myCenter=new google.maps.LatLng(51,508743,-0,12085);
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);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
i have read this question :Getting database values in Javascript variable dynamically .
but still dont understand how it works, what do i need to add and what do i need to change. please help

In which language?
In PHP you have to just use your variables with db table column values in place of long and lat.
e.g. and
var myCenter=new google.maps.LatLng(,);
Let me know if you want the multiple maps with in the loop.
Vikash

Related

Error when Calling Local GeoJSON File in Google Maps API

Since Google Fusion Tables has been shut down, I'm trying to recreate a data layer (with U.S. Counties) using a JSON file.
Here is my JS:
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: {lat: 39.8283, lng: -98.5795},
zoom: 5
});
var script = document.createElement('script');
//call json file of US counties
script.src = 'assets/sheet/places.json';
document.getElementsByTagName('head')[0].appendChild(script);
}
</script>
When I run the page, the map works but I get an error that says: "Uncaught SyntaxError: Unexpected token ':'" at only the second line of the JSON file.
Does anyone know what I can do to fix this? I've looked through pages of Google and haven't been able to find a solution. FYI, I basically have no experience with JSON but haven't found another way to convey a large dataset easily with Google Maps API.
The JSON file is here, in case anyone wants to see: https://www.estherloui.se/projects/sheet/gz_2010_us_050_00_20m.json
You can add GeoJSON data to your map using loadGeoJson. See the code below:
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
//center on the US
center: { lat: 39.8283, lng: -98.5795 },
zoom: 5
});
map.data.loadGeoJson('assets/sheet/places.json');
}
</script>
Screenshot:
Hope this helps!

Injecting Javascript From Meteor Template

I'm pulling long, lat coords from my collection and I want to generate dynamic Google Map Markers onto the map in the page.
The data is populating fine in the source, but the markers fail to show on the page.
Is it possible to inject a javascript object into the <script></script> tags?
Javascript
Template.maps.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {zoom: 8, center: new google.maps.LatLng(33.658206, -111.962827)});
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
});
HTML
<template name="maps">
<div id="map-canvas"></div>
</template>
Don't mix html and js. Put all the javascript inside methods of relevant template.
Template.mapWrapper.onRendered(function() {
var map = new google.maps.Map(this.find('.map'), {...});
_.each(locations, function(location) {
marker = new google.maps.Marker({...});
});
});
You should also use classes or data parameters instead of element id, but most importantly, don't mix html and js.

Passing Django variable in template JS

I am using the Django framework. In my template I have an variable {{i.slot.place.latitude}} and other is {{i.slot.place.longitude}}
I want to use these variables in java script with google map. which is-
<script type="text/javascript">
var map;
var myCenter = new google.maps.LatLng({{interview.slot.location.place.latitude}} ,{{ interview.slot.location.place.longitude }});
var marker = new google.maps.Marker({
position: myCenter
});`
here in google.maps.LatLng I am trying to give these variable but it's not working. Can somebody tell me the right way?
You need to serialize data in your view manually https://docs.djangoproject.com/en/dev/topics/serialization/

My realtime map doesn't autorefresh

I need help with a code from my work, it is a map (google,maps) with a kml, it is updated every 4 minutes time to the script extract the information to the bd, my problem is with the map. It doesn't refresh.
the map is here: 190.216.202.35/control/patios.html
and the kml is here: 190.216.202.35/control/refresh.kml
the map call a kml
all the code is correct but the page dont refresh the points not move until y "F5" the page
sorry for my English but I really need help
I have this but Is Not Enough
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var kmlLayerOptions = {map:map, preserveViewport:true}; //map:display kml layer on created map object called "map"; preserveViewport: preserve maps options
var kml = new google.maps.KmlLayer("http://190.216.202.35/control/refresh.kml?dummy="+(new Date()).getTime(), kmlLayerOptions);}
google.maps.event.addDomListener(window, 'load', initialize);
var refreshMilliseconds = 3000;
var options = {
frequency : refreshMilliseconds,
enableHighAccuracy : true
};
try to implement the code code in function watchUserLocation(),i am trying to upadte for every 3 sec

Some Google Map features not appearing when used in Blogger

I am trying to add a Google Map on a blog (using Blogger). The script retrieves each post in the blog using the Blogger API and get its location (Lat/Lng). It creates a map that shows a polyline connecting all these places. It also shows a marker at the last place visited and center the map there as well (here, it should be Buenos Aires).
I wrote a little html/javascript piece of code to do that and it works fine in a browser (First image below). However, when I try to include the html code on the blogger page/post, some features of the map are not there anymore (Second image below).
It is very strange because the path (Polyline) is correctly shown but not the marker. In addition, the properties of the map are not taken into account (ie: center position, satellite view). However, when I move the map around, the correct map appears for a fraction of a second from time to time!
Here is the link to the blog where I am testing this:
http://testblogapinico.blogspot.ch/p/map.html
And the actual code that produces the first map (I simply copy/pasted this in the blog post to get the second map):
<!DOCTYPE html>
<html>
<body>
<div id="content"></div>
<div id="googleMap" style="width:600px;height:900px;"></div>
<script
src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>
<script>
var Lat = new Array();
var Lng = new Array();
var Place = new Array();
// Get latitude/longitude from Blogger
function handleResponse(response) {
for(i=0; i< response.items.length; i++){
Lat.push(response.items[i].location.lat);
Lng.push(response.items[i].location.lng);
Place.push(response.items[i].location.name);
}
}
// Create the map based on locations retrieved from Blogger
function initialize(){
// Get all latitude and longitude
var pos = new Array();
// Get the path
for(var i=0; i<Lat.length; i++){
pos[i]=new google.maps.LatLng(Lat[i],Lng[i]);
}
// Get the last position
var lastpos=new google.maps.LatLng(Lat[0],Lng[0]);
// Create the map
var mapProp = {
center:lastpos,
zoom:4,
mapTypeId:google.maps.MapTypeId.SATELLITE
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
// Create the marker of last position
var marker=new google.maps.Marker({
position:lastpos,
});
marker.setMap(map);
// Create the path
var flightPath = new google.maps.Polyline({
path:pos,
strokeColor:"#EE0000",
strokeOpacity:0.6,
strokeWeight:7
});
flightPath.setMap(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
<script
src="https://www.googleapis.com/blogger/v3/blogs/884353949349844556/posts?callback=handleResponse&key=AIzaSyAJO5J-pRCaGOIeRLIJfvAPwxpMLKvwebU">
</script>
</body>
</html>
Anybody knows what the problem could be?
Thank you in advance for your help!!!
Cheers,
Nicolas
I looked at your page, and it looked like you have two maps, one on top of the other.
Looking at the source, you do indeed have two javascripts that initialize maps.
Interestingly, they're both named "initialize" - not sure why you don't just get an error on that.
I'm guessing that if you remove the extra javascript, it will work properly.

Categories

Resources