Power By 专否社区

Google map API with jQuery

Go To StackoverFlow.com

1

I want to design a html business card with a map icon (the icon will show a red pin of the address that's in the card). The map window will be very small (100 X 100 px), but upon click it will open google map with the address pinned. Is there a jQuery plugin that can easily achieve this, or would someone pls point me to the right direction?

2012-04-04 17:46
by Laguna
You wouldn't need jQuery to do that. You could simply open up a new window and send the user to Google Maps. The address can be passed as a GET-parameter - Christofer Eliasson 2012-04-04 17:51
Thanks Chris, but in the small map icon i want to show actual location too - Laguna 2012-04-04 17:53
Okay, but that could be done using the standard Google Maps JavaScript-API. No need for jQuery there either - Christofer Eliasson 2012-04-04 17:55
Off the top of your head, do you know if that API gives me control to specify the map size - Laguna 2012-04-04 17:55
The map size can be set either through the API, or by setting the width and height through CSS - Christofer Eliasson 2012-04-04 17:57
OK sounds good to me. It'll be my pleasure to mark it as answer if you can put it into an answer. Thanks - Laguna 2012-04-04 18:00
Thank you! Posted it as an answer - Christofer Eliasson 2012-04-04 18:03
Do you want the map to open in a lightbox, or blank window - trickyzter 2012-04-04 17:50
both will be ok. it can even open in a div...as long as it can blow up to a bigger map upon click - Laguna 2012-04-04 17:52
Christofer, I would if I had the reputation to suffice - trickyzter 2012-04-04 22:23

2

There is no need to use jQuery to solve this.

I believe the easiest way to achieve this would be to open up a new window, and send the user to Google Maps. The address can be passed as a GET-parameter.

For the small map, you can use the standard Google Maps JavaScript-API, to put the marker on the map.

2012-04-04 18:02
by Christofer Eliasson

1

I don't know if there is any jquery plugin for this. But what you describe should not be too difficult to achieve. I would do the following for this task. 

$('#my_pin').click(function(){
  1. create a div for map, set the height and width for this div. 
     var div = document.createElement('div');
     you may want to add some event hanlder to this div so that it can be closed 

  2. create a google map options similar to 
     var opts = {
       center: new google.maps.LatLng(100,100),
       zoom: 5,
       mapTypeId: google.maps.mapTypeId.ROADMAP
     }
  3. create your map object base on the newly created div and options
     var map = new google.maps.Map(div,opts )

  4. attach the new div to your body or whatever parent element
     $(div).appendTo($('body').get(0));



});
2012-04-04 18:46
by Wei Ma
Ads