Welcome to the Java Programming Forums


The professional, friendly Java community. 21,500 members and growing!


The Java Programming Forums are a community of Java programmers from all around the World. Our members have a wide range of skills and they all have one thing in common: A passion to learn and code Java. We invite beginner Java programmers right through to Java professionals to post here and share your knowledge. Become a part of the community, help others, expand your knowledge of Java and enjoy talking with like minded people. Registration is quick and best of all free. We look forward to meeting you.


>> REGISTER NOW TO START POSTING


Members have full access to the forums. Advertisements are removed for registered users.

Results 1 to 4 of 4

Thread: Creating a google map with markers and an option to change to heatmap

  1. #1
    Junior Member
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Creating a google map with markers and an option to change to heatmap

    I have created a map using google map api v3. Currently what i have managed to achieved is to plot the location with a marker; that is parsed out from a json file.

    Ultimately i am trying to add an option of switching to HeatMap view. Just like [
    HTML Code:
    https://google-developers.appspot.com/maps/documentation/javascript/examples/full/layer-heatmap
    ]
    I have viewed the source code and attempted to replicate the Heatmap toggle codes into my existing code by copying the relevant portion out but it was not very successful.

    I am wondering if anyone here could point me in the right direction or point out my mistakes.

    - Would appericate any form of help. Cheers

    **I have added commenting. Hopefully that would make reading the code a lot easier.


    var map, pointArray, heatmap;
                  var infowindow = new google.maps.InfoWindow({});
     
                  //createMarker function
                  function createMarker(latLng, title, content) {
                  var marker = new google.maps.Marker({
                  position: latLng,
                  map: map,
                  title: title
                });
     
                //Onclick listener(mouseover)
                google.maps.event.addListener(marker, "click", function() {
                    infowindow.setContent(content);
                    infowindow.open(map, marker);
                });}
     
                //toggleHeatmap function
                function toggleHeatmap() {heatmap.setMap(heatmap.getMap() ? null : map);}
     
                // initialization function (focus location ,map type and zoom level)
                function initialize() {
                var mapOptions = {
                zoom: 5,
                center: new google.maps.LatLng(-27.48939, 153.012772),
                mapTypeId: google.maps.MapTypeId.ROADMAP 
              };
              map = new google.maps.Map(document.getElementById('map_canvas'),
                  mapOptions);
     
              //reading location file
              var script = document.createElement('script');
              script.src = '\week.json';
              document.getElementsByTagName('head')[0].appendChild(script);
     
        	   //creating heatmap
        		 var pointArray = new google.maps.MVCArray(latLng);
     
        			heatmap = new google.maps.visualization.HeatmapLayer({
        			data: pointArray
        			});
        		 heatmap.setMap(map);
            }
     
        	//window will load this at start
        	window.eqfeed_callback = function(results) {
              var bounds=new google.maps.LatLngBounds();
              for (var i = 0; i < results.features.length; i++) {
     
                var wifin = results.features[i]; 
                var coords = wifin.geometry.coordinates; 
     
                var latLng = new google.maps.LatLng(coords[0],coords[1]); 
                bounds.extend(latLng);
     
                var content ="<div style='height:100px; width:300px; overflow:auto;'><table>";
                content += "<tr><th align='left'>WifiMacAddress</th><td>"+wifin.properties.WifiMacAddress+"</td></tr>";
                content += "<tr><th align='left'>SSID</th><td>"+wifin.properties.SSID+"</td></tr>";
                content += "<tr><th align='left'>SignalStrength</th><td>"+wifin.properties.SignalStrength+"</td></tr>";
                content += "<tr><th align='left'>WifiFrequency</th><td>"+wifin.properties.WifiFrequency+"</td></tr>";
                content +="</table>";
                createMarker(latLng,wifin.WifiMacAddress,content);
              }
              map.fitBounds(bounds);
            }
     
     
              </script>
     
     
    For the invoking part, i did exactly the same as what the sample map showed.
     
     
     
        <button onclick="toggleHeatmap()">Toggle Heatmap</button>

    [1]: https://google-developers.appspot.co.../layer-heatmap
    Last edited by ss1w; October 5th, 2013 at 09:24 AM. Reason: Not relevant to the forum


  2. #2
    Forum Squatter newbie's Avatar
    Join Date
    Nov 2010
    Location
    North Wales
    Posts
    661
    My Mood
    Stressed
    Thanks
    28
    Thanked 115 Times in 106 Posts
    Blog Entries
    1

    Default Re: Creating a google map with markers and an option to change to heatmap

    Wrong forum pal. Java is not in any way related to JavaScript, contrary to the name.
    Please use [highlight=Java]//code goes here...[/highlight] tags when posting your code

  3. The Following User Says Thank You to newbie For This Useful Post:

    ss1w (October 5th, 2013)

  4. #3
    Junior Member
    Join Date
    Sep 2013
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Default Re: Creating a google map with markers and an option to change to heatmap

    That explains why i couldnt add tags for googlemap as well as heatmap. Cheers mate, will remove this topic

  5. #4
    Forum Squatter newbie's Avatar
    Join Date
    Nov 2010
    Location
    North Wales
    Posts
    661
    My Mood
    Stressed
    Thanks
    28
    Thanked 115 Times in 106 Posts
    Blog Entries
    1

    Default Re: Creating a google map with markers and an option to change to heatmap

    No need to remove, even if you could but it is the wrong forum for you to get results in less than 2 weeks
    Stackoverflow would be the right place for this sort of question.
    Please use [highlight=Java]//code goes here...[/highlight] tags when posting your code

Similar Threads

  1. Replies: 10
    Last Post: April 21st, 2013, 09:28 AM
  2. Creating method to change money?
    By j4ze in forum What's Wrong With My Code?
    Replies: 4
    Last Post: November 19th, 2012, 03:21 PM
  3. Creating a Map That a User Can Traverse Around
    By gorel in forum AWT / Java Swing
    Replies: 0
    Last Post: November 2nd, 2012, 01:16 PM
  4. Replies: 9
    Last Post: September 1st, 2012, 07:25 AM
  5. Setting markers in strings??
    By wingchunjohn in forum Java Theory & Questions
    Replies: 3
    Last Post: February 20th, 2010, 02:29 AM

Tags for this Thread