javascript - Google Map API V3 - Click on Marker show more info content as overlay (like in Google Maps) -

-

we use google map api v3 load google map in html container. have location search form. on submit, available locations , set markers in map. once markers loaded, on click on each marker need show title, address details , design have in google map. (in google maps - when clicking on red marker, can see more info overlay box additional details stars, directions, search nearby, save map, more..)

do have built in api function load overlay box above. or don't have function load details have in google map currently.

when searched in google , map docs, can see options show overlay window , write content inside box. didn't see options load content required.

i have pasted code below reference.

       var map = null;        gmap_ready = function (){     var mylatlng = new google.maps.latlng(43.834527,-103.564457);     var myoptions = {       zoom: 3,       center: mylatlng,       maptypeid: google.maps.maptypeid.roadmap     }     map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);

}

   function fnloadmarkers(){ var locations  = [     ['s dakota', 43.834527,-103.564457, 1],     ['texas', 31.428663,-99.418947, 2],     ['california', 36.668419,-120.249025, 3],     ['newyork', 43.197167,-76.743166, 4],     ['missouri', 38.410558,-92.73926, 5] ]; setmarkers(map,locations);    }  function setmarkers(map, locations) { var image = 'images/marker.gif';  (var = 0; < locations.length; i++) {     var currlocation = locations[i];     var latlng = new google.maps.latlng(currlocation[1], currlocation[2]);     var marker = new google.maps.marker({         position: latlng,         map: map,         icon: image,         title: currlocation[0],         zindex: currlocation[3]     });     google.maps.event.addlistener(marker, 'click', function() {         var latitude = this.position.lat();         var longitude = this.position.lng();         window.open("http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q="+latitude+","+longitude+"&sll="+latitude+","+longitude+"&sspn=0.172749,0.4422&ie=utf8&ll="+latitude+","+longitude+"&spn=0.162818,0.4422&z=11&iwloc=a");     });   }

}

if there hint on how achieve these results, helpful. also, please guide, whether possible through google api v3.

thanks in advance,

regards

srinivasan.c

i don't understand why opening new window google maps google maps api marker? cannot add info window on google maps via url.

this how it.

<!doctype html>   <html>   <head>   <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  <meta http-equiv="content-type" content="text/html; charset=utf-8"/>   <link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />   <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>   <script type="text/javascript">  // initiate map  function initialize(data) {    // make position center map    var mylatlng = new google.maps.latlng(data.lng, data.lat);     // map options     var myoptions = {      zoom: 10,      center: mylatlng,      maptypeid: google.maps.maptypeid.hybrid    };     // initiate map    map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);     // info window element    infowindow = new google.maps.infowindow();     // set pin    setpin(data);  }  // show position  function setpin(data) {    var pinlatlng = new google.maps.latlng(data.lng, data.lat);    var pinmarker = new google.maps.marker({      position: pinlatlng,      map: map,      data: data    });     // listen click event     google.maps.event.addlistener(pinmarker, 'click', function() {      map.setcenter(new google.maps.latlng(pinmarker.position.lat(), pinmarker.position.lng()));      map.setzoom(18);      onitemclick(event, pinmarker);    });  }  // info window trigger function  function onitemclick(event, pin) {    // create content     var contentstring = pin.data.text + "<br /><br /><hr />coordinate: " + pin.data.lng +"," + pin.data.lat;     // replace our info window's content , position    infowindow.setcontent(contentstring);    infowindow.setposition(pin.position);    infowindow.open(map)  }  </script>   </head>   <body onload="initialize({lat:-3.19332,lng:55.952366,text:'<h2>edinburgh</h2><i>nice city!</i>'})">    <div id="map_canvas">   </div>   </body>   </html>

Comments

Post a Comment

Popular posts from this blog

django - How can I change user group without delete record -

-
on website user have 1 group. , user can change group. it's made user.groups.clear() and user.groups.add(new_group) but it's not efficient, because there 2 sql query: delete, insert. how can change group update query? user , group related each other using manytomanyfield . means intersection table exists relating both entities, , if don't specify model map (using through attribute) django creates 1 you. looking @ sources django.contrib.auth.models see that's case. fortunatly, can access intermediary model using through attribute of manager (in case, user.groups.through ). can use regular model. example: >>> alice = user.objects.create_user('alice', 'alice@example.com', 'alicepw') >>> employee = group.objects.create(name='employee') >>> manager = group.objects.create(name='manager') >>> alice.groups.add(employee) >>> alice.groups.all() [<group: employee...
Read more

java - Need to add SOAP security token -

-
i need set custom soap header attribute on jax-ws generated webservice client. case webservice calls must go through proxy server requiring specific token (recieved web request header) present in soap request header. e.g.: 1 carserviceservice service = null; 2 service = new carserviceservice(new url(url), new qname(qname); 3 carserviceendpoint port = service.getcarserviceport(); it seems in line 3 wsdl retrieved , call fails due missing security token. 1 point direction on how done? a detailed example has been mentioned here: creating , deploying jax-ws web service on tomcat 6 this article shows how create , use security token .
Read more

java - EclipseLink JPA Object is not a known entity type -

-
i have strange problem eclipselink , object want persist. have 1 object (keypointlistimpl) stores object keypointimpl in list. persisting keypointimpl objects works great if try persist keypointlistimpl object java.lang.illegalargumentexception says object keypointimpl isn't known entity type. here keypointimpl code: @entity @table(name="keypoints") public class keypointimpl implements keypoint { @id @generatedvalue(strategy = generationtype.identity) private int id; @enumerated(enumtype.string) private detectortype keypointtype; private float x; private float y; private float size; private float angle; private float response; private int octave; private int classid; ... } here keypointlistimpl code: @entity @table(name="keypointlists") public class keypointlistimpl implements keypointlist { @id @generatedvalue(strategy = generationtype.identity) private int id; @onetoone(cascade={ca...
Read more