Google Map Api v3

[scoob]

Здравейте,
Имам въпрос относно Google Map Api v3. Та той е ако някой се е занимавал с него може ли да ми каже как мога да поставям маркери и да ги запазвам по някакъв начин за да може при презареждане на страницата те да си стоят?

<!DOCTYPE html>
<html> 
<head> 
<title>Map</title>
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var map;
  var markersArray = [];

  function initialize() {
    var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
    var mapOptions = {
      zoom: 12,
      center: haightAshbury,
      mapTypeId: google.maps.MapTypeId.TERRAIN
    };
    map = new google.maps.Map(document.getElementById("map_canvas"),
        mapOptions);

    google.maps.event.addListener(map, 'click', function(event) {
      addMarker(event.latLng);
    });
  }
  
  function addMarker(location) {
    marker = new google.maps.Marker({
      position: location,
      map: map
    });
    markersArray.push(marker);
  }
</script> 
</head> 
<body onload="initialize();"> 
  <div id="map_canvas" style="width:600px; height:500px"></div> 
</body> 
</html>

Това е кода, който ползвам ако може да ми кажете как да го модифицирам ще съм ви много благодарен.

 

[palex]

Опитай нещо такова:

[js]
var infowindow;
var marker;

function initialize() {
var haightAshbury = new google.maps.LatLng(37.7699298, -122.4469157);
var mapOptions = {
zoom: 12,
center: haightAshbury,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);


var contentString = '<div style="width: 100%; border: none; font-family: Verdana, Arial; font-size: 10pt; padding: 0px; margin: 0px; background: white;" id="content">'+
'<h1 style="width: 100%; border: none; font-family: Verdana, Arial; font-size: 12pt; color: black; background: white; padding: 0px; margin: 0px;" id="firstHeading" class="firstHeading">'+
'<img align="left" width="30" src="/images/logo.png"/> CompanyName ООД<br/><span style="font-size: 9pt;">София, Address</span></h1>'+
'<div style="border none; font-family: Verdana, Arial; font-size: 10pt; background: white;" id="bodyContent">'+
'</div>'+
'</div>';

infowindow = new google.maps.InfoWindow({
content: contentString
});
marker = new google.maps.Marker({
position: haightAshbury
map: map,
title: 'CompanyName ООД (София, Address)'
});

google.maps.event.addListener(marker, 'mouseover', function() {
infowindow.open(map,marker);
});
infowindow.open(map,marker);



}

[/js]

infowindow и marker ги дефинирай извън функцията, за да са достъпни в цялата страница.

 

[scoob]

Това е добра идея, но идеята ми беше маркерите да се добавят динамично. В първия код който дадох може да се добавят маркерите но не се запазвам при презареждане на страницата.

 

[exec]

При всяко изпълнение на функцията addMarker, записваш параметъра location като нов елемент в някакъв масив, масива се сериализира и се записва в cookie. След това при всяко зареждане на страницата, проверяваш дали твоето cookie има някаква стойност, десериализираш, обикаляш елементите от масива и за всеки от тях извикваш addMarker. Сериализирането може да го опростиш до най-обикновенно join/split решение.

 

[scoob]

Ок записвам масива в бисквитка

joinLoc = locations.join("+");

От тук стойността на joinLoc се записва в бисквитката. До тук всичко работи, но сега идва ред за обратното действие и тук получавам проблем.
Ако масива има стойност

locations = [[info, loc],[info, loc]];

Така съм направил бисквитката

 $.cookie('locc', joinLoc, {expires: 365});
locc = $.cookie('locc');

Искам сега locc да го разделя на locations (масива) за да мога да го поставя като позиция за маркерите.