SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Creating interactive Google Map with hover over?

    Hi there,
    What would be the best way to create a map similar to the one on the left of this page:
    http://www.communitywalk.com/

    E.g, when you hover over the pointers, it displays some hover text. Also, could I style these to the way I want and include the text I would like on each pointer?

    Thanks!

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    It looks like that one is none through Google itself and then embedded on the page.

    You could create your own version if you wanted, even just with HTML and CSS. You would just take a map image, absolutely place the markers over that image, and have text appear when you hover on the markers.

  3. #3
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, but it seems the map is done through Google as you can drag it around. Any other ideas?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by ebsolutions View Post
    Thanks, but it seems the map is done through Google as you can drag it around. Any other ideas?
    You could do it through Google yourself. I've forgotten how, but if you Google "add pins to your Google map" or something like that, you find instructions on how to add those pins to your map and then embed the map on your page. I assume that's how they've done this.

  5. #5
    SitePoint Zealot
    Join Date
    Nov 2007
    Posts
    126
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can add the pins/pointers, but wanted to know how I can add my own custom hover effects like they have done in the white box/black text. Any ideas?

    Thanks

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,207
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Hm, Googling this produced all sorts of technical info about using the Google Maps API with JS etc. But I assume there is a way to do it though the same interface that lets you place the pins. This video might give the clue:

    http://www.youtube.com/watch?v=vvBty11p53I


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •