简体   繁体   中英

Google maps Api2 to google maps api3

I have problems to translate script with google maps from API2 to API3. Script works like that - On the map exist one marker and the user can drag him or click on the map and removes this marker to click place, cooridantes with current marker position goes to hidden input. This is the script:

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<!-- google maps -->


<!-- Do rejestracji -->
<script type='text/javascript'>
<!-- 
var mapa;   
var marker;  

function mapaStart()
 {
 if(GBrowserIsCompatible())  
 {       
mapa = new GMap2(document.getElementById("doMeeting"));

mapa.setCenter(new GLatLng(52.348763181988076, 18.61083984375), 6, G_HYBRID_MAP);
mapa.addControl(new GLargeMapControl());  
mapa.addControl(new GMapTypeControl()); 

marker = new GMarker(mapa.getCenter(),{icon: marker, draggable: true});
mapa.addOverlay(marker);

// zdarzenia dla markera
GEvent.addListener(marker,'drag',uaktualnijWspolrzedne);
GEvent.trigger(marker,'drag');

// zdarzenia dla mapy
GEvent.addListener(mapa,'click',function(o,p)
{
  if(p)
  {
    marker.setPoint(p);
    uaktualnijWspolrzedne();
  }
});
}
}

function uaktualnijWspolrzedne()
{ 
var input_lat = document.getElementById('lat');
var input_lng = document.getElementById('lng');
var punkt = marker.getLatLng();

input_lat.value = punkt.lat();
input_lng.value = punkt.lng();
}

</script>

And view:

<div id="doMeeting" style="width: 400px; height: 400px;"></div>
<input type="hidden" id="lat" name="lat"/>
<input type="hidden" id="lng" name="lng"/>

And my problem is that my translate script didnt work as the old one. Marker can only drag, option with click on the map wont work and the coordinates of the marker position dont go to input. I didnt have experiacne with google maps or JavaSript so please help. This is how i try to translate script:

<script type='text/javascript'>
<!-- 
var mapa;  

function mapaStart()
{     
mapOpc = {
center:new google.maps.LatLng(52.348763181988076, 18.61083984375),
zoom:6,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
mapa=new google.maps.Map(document.getElementById("doMeeting"),mapOpc);

var marker=new google.maps.Marker({
position:new google.maps.LatLng(52.348763181988076, 18.61083984375),
draggable: true,
map: mapa,
});
marker.setMap(mapa);

// zdarzenia dla markera
google.maps.event.addListener(marker,'drag', uaktualnijWspolrzedne);
google.maps.event.trigger(marker,'drag');

// zdarzenia dla mapy
google.maps.event.addListener(mapa,'click',function(event)
{
    marker.setPoint(event);
    uaktualnijWspolrzedne();
});

}
function uaktualnijWspolrzedne()
{
var input_lat = document.getElementById('lat');
var input_lng = document.getElementById('lng');
var punkt = marker.getLatLng();

input_lat.value = punkt.lat();
input_lng.value = punkt.lng();
}
google.maps.event.addDomListener(window, 'load', mapaStart);
</script>

Issues:

  1. marker needs to be global as it was in your v2 version (get javascript error" Uncaught ReferenceError: marker is not defined )
  2. marker.getLatLng doesn't exist, it is now marker.getPosition
  3. marker.setPoint doesn't exist, it is now marker.setPosition (as Dr Molle observed)

working fiddle

var mapa;
var marker;

function mapaStart() {
    mapOpc = {
        center: new google.maps.LatLng(52.348763181988076, 18.61083984375),
        zoom: 6,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    mapa = new google.maps.Map(document.getElementById("doMeeting"), mapOpc);

    marker = new google.maps.Marker({
        position: new google.maps.LatLng(52.348763181988076, 18.61083984375),
        draggable: true,
        map: mapa,
    });
    marker.setMap(mapa);

    // zdarzenia dla markera
    google.maps.event.addListener(marker, 'drag', uaktualnijWspolrzedne);
    google.maps.event.trigger(marker, 'drag');

    // zdarzenia dla mapy
    google.maps.event.addListener(mapa, 'click', function (event) {
        marker.setPosition(event.latLng);
        uaktualnijWspolrzedne();
    });

}

function uaktualnijWspolrzedne() {
    var input_lat = document.getElementById('lat');
    var input_lng = document.getElementById('lng');
    var punkt = marker.getPosition();

    input_lat.value = punkt.lat();
    input_lng.value = punkt.lng();
}
google.maps.event.addDomListener(window, 'load', mapaStart);

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM