javascript - How to add popup window in Google maps when a marker is clicked -
i trying build dynamic google map using jquery json , php, how managed complete map listing using following code example:
<script type="text/javascript"> // root path data directory var dataroot = 'gmap-master/'; // data file markers (could php file dynamic markers) var newdate = new date; var markerfile = dataroot + 'ammap.php'; // set default map properties var defaultlatlng = new google.maps.latlng(49.00, 10.00); // zoom level of map var defaultzoom = 2; var ndefaultzoom = 2; // variable map var map; // variable marker info window var infowindow; // list marker check if exist var markerlist = {}; // set error handler jquery ajax requests $.ajaxsetup({"error": function(xmlhttprequest, textstatus, errorthrown) { alert(textstatus + ' / ' + errorthrown + ' / ' + xmlhttprequest.responsetext); }}); // option google map object var myoptions = { zoom: defaultzoom, center: defaultlatlng, maptypeid: google.maps.maptypeid.hybrid }; /** * load map */ function loadmap() { console.log('loadmap'); // create new map make sure div id mymap exist on page map = new google.maps.map(document.getelementbyid("mymap"), myoptions); // create new info window marker detail pop-up infowindow = new google.maps.infowindow(); // load markers loadmarkers(); } /** * load markers via ajax request server */ function loadmarkers() { // load marker json data $.getjson(markerfile, function(data) { // loop markers $.each(data.markers, function(i, item) { // add marker map loadmarker(item); }); }); } /** * load marker map */ function loadmarker(markerdata) { // date var mdate = new date(markerdata['created'] * 1000); // create new marker location var mylatlng = new google.maps.latlng(markerdata['lat'], markerdata['long']); // create new marker var marker = new google.maps.marker({ id: markerdata['id'], map: map, title: markerdata['creator'] + ' - ' + markerdata['name'], position: mylatlng }); // add marker list used later content , additional marker information markerlist[marker.id] = marker; var contentstring = '<div id="content">'+ '<div id="sitenotice">'+ '</div>'+ '<h1 id="firstheading" class="firstheading">"'.markerdata['name'].'"</h1>'+ '<div id="bodycontent">'+ '<p><b>uluru</b>, referred <b>ayers rock</b>, large ' + 'sandstone rock formation in southern part of '+ 'northern territory, central australia. lies 335 km (208 mi) '+ 'south west of nearest large town, alice springs; 450 km '+ '(280 mi) road. kata tjuta , uluru 2 major '+ 'features of uluru - kata tjuta national park. uluru '+ 'sacred pitjantjatjara , yankunytjatjara, '+ 'aboriginal people of area. has many springs, waterholes, '+ 'rock caves , ancient paintings. uluru listed world '+ 'heritage site.</p>'+ '<p>attribution: uluru, <a href="http://en.wikipedia.org/w/index.php?title=uluru&oldid=297882194">'+ 'http://en.wikipedia.org/w/index.php?title=uluru</a> '+ '(last visited june 22, 2009).</p>'+ '</div>'+ '</div>'; var infowindow = new google.maps.infowindow({ content:contentstring }); // add event listener when marker clicked // marker data contain dataurl field can of course done different google.maps.event.addlistener(marker, 'click', function() { // show marker when clicked infowindow.open(map,marker); map.setzoom(6); map.setcenter(marker.getposition()); }); // add event when marker window closed reset map location google.maps.event.addlistener(infowindow, 'closeclick', function() { }); // add marker list var listitem = $("<li/>"); $("<a/>").attr('href', '#').click(function() { showmarker(marker.id); return false; }).text(markerdata['name']).appendto(listitem); $('#mymaplist').prepend(listitem); } /** * show marker info window */ function showmarker(markerid) { // marker information marker list var marker = markerlist[markerid]; // check if marker found if (marker) { // marker detail information server $.get(dataroot + 'data/' + 'markernew' + '.html', function(data) { // show marker window infowindow.setcontent(data); map.setzoom(6); infowindow.open(map, marker); }); } else { alert('error marker not found: ' + markerid); } } /** * adds new marker list */ function newmarker() { // new city name var markeraddress = $('#newmarker').val(); if (markeraddress == "") { $('#newmarker').addclass('error'); $('#newmarker').attr('placeholder', 'missing location'); return false; } // create new geocoder dynamic map lookup var geocoder = new google.maps.geocoder(); geocoder.geocode({'address': markeraddress}, function(results, status) { // check response status if (status == google.maps.geocoderstatus.ok) { // set new maker id via timestamp var newdate = new date; var markerid = newdate.gettime(); // name of creator var markercreator = prompt("please enter name", ""); // create new marker data object var markerdata = { 'id': markerid, 'lat': results[0].geometry.location.lat(), 'long': results[0].geometry.location.lng(), 'creator': markercreator, 'name': markeraddress, }; // save new marker request server $.ajax({ type: 'post', url: dataroot + "data.php", data: { marker: markerdata }, datatype: 'json', async: false, success: function(result) { // add marker map loadmarker(result); // show marker detail showmarker(result['id']); $('#newmarker').removeclass('error'); // track piwik goal _paq.push(['trackgoal', 2]); } }); } else if (status == google.maps.geocoderstatus.over_query_limit) { alert("marker not found:" + status); } }); } </script> when user clicks marker invoke function showmarker(markerid) using html load data. want set html code manually in script , when user clicks marker popup should shown.
Comments
Post a Comment