CODEWITHSUNDEEP
javascripthtmlgoogle-maps-api-3blogger
nbeuchat
nbeuchat

Reputation: 7091

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).

Comparison of how the maps looks like in firefox and Blogger

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

Upvotes: 2

Views: 227

Answers (1)

GreyBeardedGeek
GreyBeardedGeek

Reputation: 30088

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.

Upvotes: 1

Related Questions