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.
Related
I've got a Web Application with C# code that creates a list of objects with their long and lat. I want to then create marker points on Google Maps for them using Javascript. I've currently got this code:
var marker;
for (var i = 0; i < ('<%= Buses.Count %>' - 1); i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng('<%= Buses['i'].latitude %>', '<%= Buses['i'].longitude %>'),
map: map
});
}
Which does not work, I believe the error is with where I reference "i" to say which object in the list to use.
If I manually set a marker point without a for loop and change ['i'] to [0] it will place a marker fine. However, due to the number of items changing and reaching up to 100 I require using a for loop. I have tried removing the '' around i and this generates an error saying
"i does not exist in the current context."
I have seen these posts:
Add two marker points in google maps
Google Maps JS API v3 - Simple Multiple Marker Example
Google Maps JS API v3 - Simple Multiple Marker Example
However, all of these are using locations inside of the JavaScript. My objects are contained within the C# code as a custom object defined as:
public static List<Bus> Buses = new List<Bus>();
This is my C# Code in full:
https://pastebin.com/2M1hWjnM
You're mixing a javascript for with data in code-behind/C#. It not works.
First, you've to put the marks data on a javascript array. Then make your for without webforms tags <%%>
put something like this on your page code behind (C#)
public static string getBusesJson()
{
var buses = new List<Bus>();
buses.Add(new Bus() {latitude = 10, longitude = 20 });
buses.Add(new Bus() { latitude = 15, longitude = 30 });
buses.Add(new Bus() { latitude = 5, longitude = 40 });
return JsonConvert.SerializeObject(buses);
}
put this on your aspx header:
<script type="text/javascript">
var points = <%= WebApplication3.WebForm1.getBusesJson()%>;
for (var i = 0; i < points.length; i++) {
//pass points[i].latitude and points[i].longitude to google maps
}
</script>
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
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
I have a reset button that I want to reset the map (including removing overlays) when clicked.
I've been reading around and apparently the way you remove KML overlays is by;
Declaring your kml variable as a global variable
var ctaLayer = new google.maps.KmlLayer(null);
These are the lines that cause the kml file to overlay on google maps
var ctaLayer = new google.maps.KmlLayer(kmlFile);
ctaLayer.setMap(map);
And then call setMap(null) to remove the overlay.
ctaLayer.setMap(null);
However, this does not seem to be working. I don't get any errors so I'm guessing I'm missing something? I'd appreciate any advice on getting this to work.
Remove the var from in front of the second var ctaLayer (the one that makes it local to the function).
Does this look like it should work? I'm wanting to generate directions from one latitude/longitude to another latitude/longitude.
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(35.742149,139.337218);
wp[1] = new GLatLng(35.735347,139.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.load("from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267");
The map loads fine, but the directions don't come in. I've tried it this way too:
var dirMap = new GMap2($("#dirMap").get(0));
var wp = new Array(2);
wp[0] = new GLatLng(32.742149,119.337218);
wp[1] = new GLatLng(32.735347,119.328485);
var marker = new GMarker(wp[1]);
dirMap.addOverlay(marker);
dirMap.setCenter(wp[0], 12);
dirMap.setUIToDefault();
// load directions
directions = new GDirections(dirMap);
directions.loadFromWaypoints(wp);
Same thing... map but no directions. Any help is greatly appreciated, thank you in advance!
I can't see anything obvious at first glance at your code, so my first guess is a failure coming back in for the GDirections request (I am also assuming you have checked the javascript error log for any errors, Tools/Error Console if you haven't already done this).
I suggest you add an error handler for your GDirections object, this will give you some indication what is happening with your request:
GEvent.addListener(directions, "error", handleErrors);
and in the handleErrors callback have a look in:
directions.getStatus().code
Compare with the Geo Status Codes.
EDIT: Ok, I just tried out your code here and it works perfectly. I can only assume that there is some other problem on your page that is causing the issue. Can you post a link in the question so we can check it out ?
Checking the status (604) I got when I tried in the Google Maps API Reference says:
The GDirections object could not
compute directions between the points
mentioned in the query. This is
usually because there is no route
available between the two points, or
because we do not have data for
routing in that region.
and this is the code I used (slightly modified):
$(function ()
{
if (GBrowserIsCompatible())
{
var wp = [new GLatLng(35.742149,139.337218), new GLatLng(35.735347,139.328485)];
var map = new GMap2(document.getElementById('map-canvas'));
map.setCenter(wp[0], 12);
map.setUIToDefault();
var marker = new GMarker(wp[1]);
map.addOverlay(marker);
var directions = new GDirections(map);
GEvent.addListener(
directions,
'error',
function ()
{
console.log(directions.getStatus().code);
}
);
directions.load('from: Waypoint1#21.742149,100.337218 to: Waypoint2#15.740815,100.3267');
}
});