CODEWITHSUNDEEP
google-maps-api-3onclickgoogle-maps-markers
stokexx
stokexx

Reputation: 77

google maps loading map on button click - loading markers with another button

I'm trying to load markers on the click of a button, but somewhere i'm missing something. 1. map pulls out and loads with one button click. 2. markers load with the click of a different button. here's what i have:

<!DOCTYPE>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>

<link rel="stylesheet" type="text/css" href="
    <?php  
        $stylesarray = array("field");  
        echo $stylesarray[mt_rand(0,count($stylesarray)-1)];  
    ?>.css">

<link rel="shortcut icon" href="images/favicon.ico">
<script src="http://code.jquery.com/jquery-latest.js"></script>

<script src="http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false"></script>
<script type="text/javascript"> 

var map = null;

$(document).ready(function(){   

    var lat=document.getElementById("latitude");
    var long=document.getElementById("longitude");       
    if (navigator.geolocation){
         navigator.geolocation.getCurrentPosition(showPosition); 
    } 
     function showPosition(position) {
         lat.value=+position.coords.latitude;
         long.value=+position.coords.longitude;
     }   
    });

function load() {

var map = new google.maps.Map(document.getElementById("mapcontainer"), {
    center: new google.maps.LatLng(20,0),
    zoom: 3,
    styles: mapstyle,
    mapTypeControl: false,
    navigationControl: false,
    streetViewControl: false,
    maxZoom: 8,
    minZoom: 3,
    mapTypeId: 'roadmap'
  });
}

function getmarkers(){
  downloadUrl("markers.php", function(data) {
    //alert ("it works");
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var id = markers[i].getAttribute("id");
      var info = markers[i].getAttribute("info");
      var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("latitude")),
          parseFloat(markers[i].getAttribute("longitude")));
      var date = markers[i].getAttribute("date");
      var html =  "<div id='tooltip'><div id='tiptext'>" + info
                  + "<div id='number'>" + id + "</div>"
                  + "<div id='date'>" + date + "</div>" 
                  +  "</div></div>";
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: 'images/mapicon.png'

      });         
      createTooltip(marker, html);
    }
  });

</script>
  </head>
  <body>
<div id="mapcontainer">
<form>
    <input type="button" id="map" onClick="load()"></input>  
</form>
<form> 
    <input type="button" onClick="getmarkers()"></input>
</form>

</body>
</html>

xml sample:

<markers>
<marker id="330" info="blahblah" date="2012-10-03" latitude="20.00" longitude="-81.00"/>
</markers>

Upvotes: 2

Views: 7329

Answers (3)

geocodezip
geocodezip

Reputation: 161334

Your map variable is local to your initialize function. It won't be accessible to the code that loads the markers.

Try defining it globally (outside of any functions):

var map = null;

Then initialize it in your load function

function load() {
map = new google.maps.Map(document.getElementById("mapcontainer"), {

The problem (after syntax errors) with your posted code is that the getmarkers function is local to the load function. It needs to be global to be called by an HTML element click function.

Live working version based off your example code

Upvotes: 2

david strachan
david strachan

Reputation: 7228

function getmarkers() is designed to retrieve all markers with a for loop

for (var i = 0; i < markers.length; i++) {

To load one marker at a time you will need to increment it for each button click

Ie Var i =0 globally Increment i at end of getmarkers() i++

You should stop the increments after the last member of array when it gets to markers.length

Upvotes: 1

Roy
Roy

Reputation: 428

It seems like you do not declare the map variable in the global scope. Only in the load function scope, declare it as a global variable and it should work.

var map = null; // Declaring map in the global scope

function load() {
    // map references to global scope
    map = new google.maps.Map(document.getElementById("mapcontainer"), {
    ...
}

downloadUrl("markerinfo.php", function(data) {
      ...
      var marker = new google.maps.Marker({
        map: map, // map references to global scope
        position: point,
        icon: 'images/mapicon.png'

      });         
      createTooltip(marker, html);
    }
});

Try wrapping the DownloadUrl function call in another function and call that instead.

<input type="button" id="markerload" onClick="getMarkers()"></input>

function getMarkers() {
    downloadUrl("markerinfo.php", function(data) {
        ...
    });
}

Upvotes: 1

Related Questions