blogfreakz.com » Maps

How to Create Google Maps Slider

Mufti Ali — Wed, 14 Jul 2010 09:48:56 +0000

Google Maps has a JavaScript API now in it’s third version. Google Maps v3 no longer requires applying for an API key which is nice. For one thing, it’s fully evented. That means you can attach event listeners to different thing, like the map itself or things inside the map. A simple example would be if a marker is clicked, you can change the zoom level of the map, change information shown elsewhere on the page, or really anything else you might want to do with JavaScript.

Chris Coyier was play with it a little and try to build Google Maps Slider. He created a list of locations in an unordered list. Each list item had HTML5 data attributes containing the latitude and longitude of it. It also contained a title and long and short descriptions. When one of these list items is hovered over, I apply a “hover” class to deal with styling, “pan” the map to the new coordinates, and fill out the right area with more information.

Requirements: Google Maps API
Demo: http://css-tricks.com/google-maps-slider/
License: License free

Incoming search terms for the article:

google map slider

MapBox – Open Source Tools for Creating Custom Maps

Mufti Ali — Fri, 09 Jul 2010 08:57:02 +0000

MapBox is a suite of open source tools to create beautiful custom maps in Amazon’s cloud. MapBox provides a suite of open source tools and services for creating and using custom maps in the cloud. MapBox’s TileMill toolkit is a fully configured open source tile rendering engine that can be used to create custom maps using any data set, whether your private data or freely available public sources.

MapBox.com also makes large public data sets available for easy access and use. Combining TileMill and these data sets together, MapBox provides the framework that we use to make some of the most beautiful custom maps in the world.

Requirements: -
Demo: http://mapbox.com/
License: License Free

Incoming search terms for the article:

How to Create HTML5 Location Based Application

Mufti Ali — Thu, 03 Jun 2010 09:41:20 +0000

To detect the location of a client device in the past, one would typically have to inspect the client IP address and make a reasonable guess as to the where that device was located. However, as part of the HTML5 efforts, the W3C has developed a set of APIs to effectively allow the client-side device (i.e. your iPhone 3G+, Android 2.0+ phones, or even your conventinal desktop browsers) to retrieve geographic positioning information with JavaScript.

HTML5-geolocations

Nettuts has writen comprehensive tutorial how to create location-based application using HTML5 features and jQuery framework. In this tutorial you will learn the geolocation capabilities of HTML5 and the basic principles needed to take advantage of them in your next HTML5 applications.

Requirements: jQuery Framework, HTML Support Browser
Demo: http://mobile.tutsplus.com/tutorials/html5/html5-apps-positioning-with-geolocation/
License: Free License

Incoming search terms for the article:

gMap – lightweight Google Maps Jquery plugin

Mufti Ali — Sat, 06 Feb 2010 16:49:13 +0000

gMap is a lightweight jQuery plugin that helps you embed Google Maps into your website. With only 2 KB in size it is very flexible and highly customizable.

There are a two requirements you need to meet before you can use gMap to display Google Maps on your website. First you need to sign up for a Google Maps API key. Second you need the jQuery library at least in version 1.3. To work with gMap, first you have to Download the latest version of gMap and include the Google Maps API along with jQuery and gMap in the section of your website. Don’t forget to replace “API_KEY” with your actual API key or the map won’t work when used on a real domain

Creating map using this plugin is pretty simple, just select the new div element using jQuery’s selectors and call the gMap() function on it. gMap can be customized in many different ways. All you need to do is to pass a JSON object to the GMap() function.

Available setting

latitude, longitude
zoom
markers (latitude, longitude, html,popup)
controls
scrollwheel
icon
& more..

Demo: http://gmap.nurtext.de/examples.html
License: CC License

Incoming search terms for the article:

Google Maps jQuery Plugin – simply embed Google Map

Mufti Ali — Thu, 07 Jan 2010 09:17:13 +0000

The Google Maps jQuery Plugin lets you simply embed Google Maps using The Google Maps JavaScript API in your web pages. To useThe Google Maps JavaScript API, you need to first sign up for an API key. Once you’ve received an API key, you can develop a map application.

While you can use the original Google Maps JavaScript API to do what you need. This plugin attempts to simplify the process to adding maps to a page.

Not all portions of the original API were carried over into this plugin, some portions are considered a work in progress, other portions are considered unknown to the developer at this time. If you know of a feature that is not working or does not exist, by all means contact the developer. The file size of this plugin is only Less than 10KB.

Requirements: Firefox 3, Internet Explorer 8, Safari 4
Demo: http://www.mayzes.org/googlemaps.jquery.html
License: GPL License

How to integrate google maps into flash

Mufti Ali — Thu, 24 Dec 2009 04:28:26 +0000

One of the most important skills for Flash developers to learn is how to utilize the vast collections of Web APIs that are available for services such as Flickr, Twitter, Facebook, and mapping using either Google or Yahoo. Layersmagazine teach us how to integrate Google Maps into your Flash application using just a few lines of code. The Google API is incredibly easy to use and it’s extremely powerful.

Visit source article: http://www.layersmagazine.com/integrate-google-maps-into-flash-cs4.html

Incoming search terms for the article:

Adding Google Maps to Your Website

Mufti Ali — Sun, 18 Oct 2009 18:04:31 +0000

The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and for beautifyingâ€”a little CSS.

Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldnâ€™t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? Adding Custom Google Maps to Your Website is very simple, and Stiern going to show you how.

Requirements: Google Maps API
Demo: http://stiern.com/tutorials/adding-custom-google-maps-to-your-website
License: License Free