1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Google Geo Targeting Maps

Discussion in 'CPA' started by callmelucid, Sep 10, 2009.

  1. callmelucid

    callmelucid Regular Member

    Joined:
    Feb 15, 2009
    Messages:
    487
    Likes Received:
    446
    How do you make those maps in your webpage that show stuff near a person's ip address?
     
  2. w84it

    w84it Regular Member

    Joined:
    Jun 18, 2009
    Messages:
    443
    Likes Received:
    752
    Copied from a page that has a map like this:

    Javascript in <head>here</head>
    Code:
    <script src="http://www.google.com/jsapi?key=ABQIAAAAzEi8dQLddbx5mlLEOX00tRSpfWlzPaUmEZIpm7qbh9V_yT_wARSrUsxs6OazefyT_vZcNpQW-LEo1w" type="text/javascript"></script> 
     
    <script language="JavaScript" src="http://j.maxmind.com/app/geoip.js"></script> 
     
    <script type="text/javascript"> 
    var locationstr = '';
    countrycode=geoip_country_code();
    city=geoip_city();
    if(countrycode=='US' || countrycode=='CA'){
    	locationstr=city+', '+geoip_region_name();
    } else {
    	locationstr=city+', '+geoip_country_name();
    }
    var map = null;
    var geocoder = null;
    var locpoint = null;
    google.load("maps", "2");
    google.load("search" , "1");
     
    function showAddress(address) {
    	if (geocoder) {
    		geocoder.getLatLng(
    			address,
    			function(point) {
    				if(point){
    					locpoint=point;
    					map.setCenter(point, 10);
    					var marker = new GMarker(point);
    					map.addOverlay(marker);
    					//marker.openInfoWindowHtml('You Are Here',{maxWidth:125});
    				}
    			}
    		);
    	}
    }
     
    function createMarker(point,html,option) {
    	var marker = new GMarker(point,option);
    	GEvent.addListener(marker, "click", function() {
    		marker.openInfoWindowHtml(html,{maxWidth:125});
    	});
    	return marker;
    }
     
    function createPoint(map,lat,lon,text,option,autoOpen) {
    	var point = new GLatLng(lat,lon);
    	var marker = createMarker(point,text,option);
    	map.addOverlay(marker);
    	if (autoOpen == 1) {
    		marker.openInfoWindowHtml(text,{maxWidth:125});
    	}
    }
     
    function initialize() {
    	// Get the content div and clear it's current contents.
    	var contentDiv = document.getElementById("mapDiv");
    	contentDiv.innerHTML = ''; // Clear any content currently in the Div
     
    	// Next thing we have to do is build two divs to hold our stuff
    	var mapContainer = document.createElement('div'); // build the map div
    	mapContainer.style.height = '380px'; // set the map height
    	mapContainer.style.width = '280px'; // set the map width
     
    	// Now we have to add these divs to the content div in the document body
    	contentDiv.appendChild(mapContainer);
     
    	// We're ready to build our map...
    	map = new google.maps.Map2(mapContainer);
     
    	// ...and add a couple of controls.
     
    	// We'll wait to the end to actually initialize the map
    	// So let's build the search control
    	var searchControl = new google.search.SearchControl();
     
    	// Initialize a LocalSearch instance
    	searcher = new google.search.LocalSearch(); // create the object
    	searcher.setCenterPoint(map); // bind the searcher to the map
     
    	// Create a SearcherOptions object to ensure we can see all results
    	var options = new google.search.SearcherOptions(); // create the object
    	options.setExpandMode(google.search.SearchControl.EXPAND_MODE_CLOSED);
     
    	// Add the searcher to the SearchControl
    	searchControl.addSearcher(searcher , options);
     
    	// Create our marker icons
    	var hotelIcon = new GIcon(G_DEFAULT_ICON);
    	hotelIcon.image = "http://google-maps-icons.googlecode.com/files/hotel.png";
    	hotelIcon.iconSize = new GSize(27,30);
    	hotelIcon.shadowSize = new GSize(27,30);
     
    	var homeIcon = new GIcon(G_DEFAULT_ICON);
    	homeIcon.image = "http://google-maps-icons.googlecode.com/files/home.png";
    	homeIcon.iconSize = new GSize(27,30);
    	homeIcon.shadowSize = new GSize(27,30);
     
    	// And second, we need is a search complete callback!
    	searchControl.setSearchCompleteCallback(searcher , function() {
    		var results = searcher.results; // Grab the results array
     
    		var result = results[1]; // Get the specific result
    		createPoint(map,parseFloat(result.lat),parseFloat(result.lng),result.html.cloneNode(true),{icon:hotelIcon},1);
     
    		// Store where the map should be centered
    		var center = searcher.resultViewport.center;
     
    		// Calculate what the zoom level should be
    		var ne = new google.maps.LatLng(searcher.resultViewport.ne.lat,
    																		searcher.resultViewport.ne.lng);
    		var sw = new google.maps.LatLng(searcher.resultViewport.sw.lat,
    																		searcher.resultViewport.sw.lng);
    		var bounds = new google.maps.LatLngBounds(sw, ne);
    		var zoom = map.getBoundsZoomLevel(bounds, new google.maps.Size(550, 315));
    	});
     
    	geocoder = new GClientGeocoder();
     
    	//var lat=12.9832000732;
    	//var lon=77.5832977295;
    	var lat="0";
    	if(lat==0){
    		var lat=geoip_latitude();
    	}
    	var lon="0";
    	if(lon==0){
    		var lon=geoip_longitude();
    	}
    	map.setCenter(new google.maps.LatLng(lat, lon), 10);
    	showAddress(locationstr);
     
    	// Draw the control
    	searchControl.draw();
    	// Execute an initial search
    	searchControl.execute('hotel');
    	//createPoint(map,lat,lon,'You Are Here',{icon:homeIcon},0);
    }
     
    // map onload handler
    if (window.attachEvent) {
    	window.attachEvent("onload", function() {
    		initialize();	// internet explorer
    	});
    } else {
    	window.addEventListener("load", function() {
    		initialize(); // firefox and standard browser
    	}, false);
    }
    </script> 
    
    In your body place the map somewhere:
    Code:
    <div id="mapDiv" name="map">
    Something like that hehe :p
     
    • Thanks Thanks x 3
  3. callmelucid

    callmelucid Regular Member

    Joined:
    Feb 15, 2009
    Messages:
    487
    Likes Received:
    446
    i'll try this out. looks like exactly what i need (and dont want to pay maxmind for lol)

     
  4. ~@-kanye-west-@~

    ~@-kanye-west-@~ Power Member

    Joined:
    Mar 12, 2009
    Messages:
    555
    Likes Received:
    143
    Location:
    Hollywood,USA
    edit: thats the right code lol
     
    Last edited: Sep 11, 2009
  5. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    w84it that was great code thanks!!

    is it possible to have it only point to the general geo or city instead of the dialog box or square that is shown that says;

    United States
    (626) 784-0300
    Halifax123's Whorehouse
    directions
    Get directions:
    To here
    -
    From here
    clipped from Google - 10/2009


    for me that's too much info, I just want the person to think I'm in their city, and just have it point to the location with an "X" or an "arrow" without giving specifics?

    I just want them to think I'm in the approximate city, without any rectangular dialog, or any dialog box, just a clean map with the X or an arrow

    I'd be your biggest fan lol!

    thanks!

    hali

    (I think those three stars under my name/sig mean either I was a good little girl, a three star general, or was in cell block "3" at Alcatraz)
     
    Last edited: Oct 30, 2009
  6. halifax123

    halifax123 Power Member

    Joined:
    Aug 5, 2008
    Messages:
    594
    Likes Received:
    66
    Location:
    uranus
    any ideas?