Search code examples
geolocation

use geolocation to represent the datas

geolocation picture

I want to show data bubble chart on google map. like the picture above. how should I approach this problem with geo-location?

Solution

  • I would suggest using the google api and adding makers based on lat & long to show the "bubbles" by setting the image icon. Depending on your requirements you could create an array of markers and show/hide them on the map. 

    // retrieve div for map
var mapCanvas = document.getElementById("map");

// setup map options - look at google api docs for more info
var mapOptions = {
center: new google.maps.LatLng(50, -50),
zoom: 4
};

// initialize map
var map = new google.maps.Map(mapCanvas, mapOptions);

// create marker
var marker = new google.maps.Marker({
position: { lat: locations[i].Latitude, lng: locations[i].Longitude },
icon: { url: yourBubbleImage() }
});

//to show
marker.setMap(map);

//to hide
marker.setMap(null);

    You also might need to register with google to use the gmaps api