CODEWITHSUNDEEP
javascriptjqueryhtmlgoogle-maps
Laguna
Laguna

Reputation: 3866

Google map API with jQuery

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?

Upvotes: 1

Views: 512

Answers (2)

Wei Ma
Wei Ma

Reputation: 3155

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));



});

Upvotes: 1

Christofer Eliasson
Christofer Eliasson

Reputation: 33865

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.

Upvotes: 2

Related Questions