Recreating Standard Google Map embed with Google Maps API -

-

so, having been dissapointed lack of customizability of regular google maps "embed" (iframe) code; have started tinkering google maps api v3. really, want show marker business on map, can click , go "place" @ mapsgoogle.com.

so pretty much, want recreate functionality of iframe code below. put in hour of reading docs, seems extremely complicated marker associated 'place'

the place

https://maps.google.com/maps?cid=1311411133662139490

the standard embed

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?cid=1311411133662139490&amp;ie=utf8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=a&amp;ll=41.097905,-73.405006&amp;spn=0.006295,0.006295&amp;output=embed"></iframe><br /><small><a href="https://maps.google.com/maps?cid=1311411133662139490&amp;ie=utf8&amp;hq=&amp;hnear=&amp;t=m&amp;iwloc=a&amp;ll=41.097905,-73.405006&amp;spn=0.006295,0.006295&amp;source=embed" style="color:#0000ff;text-align:left">view larger map</a></small>

it appears though there no functionality in api use cid.

to elaborate little

generally use small business websites. frustrated regular iframe embed , lack of customizability. want starting point can play stuff , heavily customize look/feel, have been unable put marker in that's associated data "place" - allowing little pop-up window, etc..

honestly, didn't enough research before asking question - , came in misconceptions. i think, , may wrong, api still want using ultimately, had know functionality in rick's answer, have settled on , procrastinated longer on learning gmaps api.

allow me explain 1 option of achieving goal. use marker , infowindow objects google maps api v3 offers, can find in document attached in link. feel free follow along in jsfiddle created: http://jsfiddle.net/bgvyh/

first thing first, want initiate map options - i'm going assume know different variables in following code snippet represent:

var mylatlng = new google.maps.latlng(41.097905,-73.405006);   var myoptions = {   zoom: 16,   center: mylatlng,   maptypeid: google.maps.maptypeid.roadmap } var map = new google.maps.map(document.getelementbyid("map_canvas"), myoptions);

if want customize map more liking, have @ different options can set in api reference, you'll set these options in myoptions object ( https://developers.google.com/maps/documentation/javascript/reference#mapoptions ). note: set center of map lat/long coordinates of restaurant - took url provided in iframe ll=41.097905,-73.405006.

now want next determine content want display in infowindow, restaurant information:

var contentstring = "<div id='content'>";     contentstring += "<div id='title'>mr. frosty's deli , grill</div>";     contentstring += "<div id='info'><p>10 1st street</p><p>norwalk, ct 06855</p><p>(203) 956-5767</p><p><a href='http://thebeachburger.com/'>thebeachburger.com‎</a></p></div></div>";

you may end pulling information database or json object in future, depending on how deep go project (for have static html).

next initialize infowindow object , set contentstring content option of infowindow. there other options can customize here (just map options, again @ reference infowindowoptions: https://developers.google.com/maps/documentation/javascript/reference#infowindowoptions )

var infowindow = new google.maps.infowindow({     content: contentstring });

after setting infowindow object, initialize marker object - place drop bubble on map. once again, set options marker when initializing did map object , infowindow object - can further customize liking looking @ reference (i think there's option in there marker can use custom icons - can pretty creative here).

var marker = new google.maps.marker({   position: mylatlng,   map: map,   title:"mr. frosty's deli , grill" });

and finally, need bind marker , infowindow - when user clicks on marker info pops up. achieved using event listener, , listen "click" action on marker variable. read document information on events on google maps https://developers.google.com/maps/documentation/javascript/events. likewise through api reference different events can listen on object.

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

that should it, should have working alternative iframe include - except can customize map , actions perform on want. in jsfiddle included styling, make things nice inside infowindow.

now, want let know - believe there option looking - have yet experiment api. google places api, you'll have register for. read through documents, think may able achieve want do. have @ ( https://developers.google.com/maps/documentation/places/ ), , see what's good.


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