I am a newbie in google map. I learn from google map documentation but I don’t found anything about postal code to google map. I only have a postal code to get the google map. If so can I get a map from postal code.
I also find in google for tutorials for that but I don't found anything. If you have a useful code or tutorial, please help me.
You first need to get the latitude/longitude from address/postcode. There is a Google GeoCodeing API for getting longitude and lattitude from address and possibly post code. It got some usage limits though. Have a look
http://code.google.com/apis/maps/documentation/geocoding/
Once u get the long/lat u can then feed these into google mapping api
E.g. Using the following javascript api
http://maps.google.com/maps/api/js?sensor=false
You can do
RenderMap(54.1109429427243, -3.197265625, 6, "resultsMapHome");
function RenderMap(lat, lng, zoomLevel, divName) {
var position = new google.maps.LatLng(lat, lng);
var options = {
zoom: zoomLevel,
center: position,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById(divName), options);
map.setCenter(position);
}
I can't format the script as I am typing from my iPhone. I will reformat it later when I get to work.
http://maps.google.com
Put in the post code, zoom in / out until you have the position you'd like the map on your own website. Then click the 'link' button to the right of the search bar (looks like a chain). This gives you the appropriate code to put that map into your website.
Is that what you wanted? I couldn't understand your English very well.
Related
I have a google map and I am using the drawing library to let the user draw polygons on the map by clicking to add points.
As a comparison I looked at trulia.com. I don't know how the drawing library setup is being made on trulia (uses backbone and other stuff). While I draw a shape, I want it to get filled as soon as I have 3 points, even if I am still drawing, and the fill should change as I add new points (indicating what the shape/area would be if you'd close it in that moment).
On trulia.com, as soon as you have a 3rd point, the area designated by the existing points gets filled, even though you haven't finished adding points. They're using google maps api, right? But I can't find the setting for something like "fill shape as you add points". I've searched google a lot, no luck.
Does anyone know how to setup the map or the drawing library to have that behavior? I don't think that this behavior can be setup in the polygonOptions (I've looked at all the options documented on developers.google.com)... so, the setting must be somewhere else...
MrCroft, it seems #ddtpoison777 asked a similar question and found the solution among some Google Maps API samples. This is the relevant code taken from the example:
var poly;
var path = new google.maps.MVCArray;
function initialize() {
poly = new google.maps.Polygon({
strokeWeight: 3,
fillColor: '#5555FF'
});
poly.setMap(map);
poly.setPaths(new google.maps.MVCArray([path]));
google.maps.event.addListener(map, 'click', addPoint);
}
function addPoint(event) {
path.insertAt(path.length, event.latLng);
var marker = new google.maps.Marker({
position: event.latLng,
map: map,
draggable: true
});
markers.push(marker);
marker.setTitle("#" + path.length);
}
I'm using the google-maps-utility-library-v3 to incorporate a Google Earth API view to a Google Maps API v3 implementation. Those Google Maps API v3 / Earth API utilities have been written by user jlivni as far as I can tell, the availability of which code has helped me greatly thus far.
(very rough working prototype of my implementation is here)
The problem I have is that I want to default (on page load) to the Google Earth view, rather than (as in the prototype above) one of the Maps API v3 standard views.
I have looked at lines 81, 131 and 133 of the (uncompiled?) googleearth.js at the above link (under src) and tried the following when setting the Maps API options within my JourneyImmersionInitialiseMapLoadGPXAnimate.js ...
var myOptions = {
zoom: 18,
center: arr_lat_lon[currentTrk][currentTrkseg][0],
scaleControl: true,
tilt: 45,
mapTypeId: earthMapType,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true
}
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
... but get ...
ReferenceError: earthMapType is not defined
Additionally I've tried ...
mapTypeId: GoogleEarth.earthMapType,
... which results in a grey map canvas with no map type options on the top right. Once I've selected the Earth view from the page I can then change between the standard Earth API map types at the console in Firebug using ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_EARTH)
... or ...
earth.getInstance().getOptions().setMapType(earth.getInstance().MAP_TYPE_SKY)
... but again, use of earthMapType or GoogleEarth.earthMapType in place of the last element results in an error at the Firebug console, this time ...
Error: Error calling method on NPObject!
Any help would be greatly appreciated.
Thanks in advance
(as I'm a newbie I can't provide more than two links in this post but wanted to add that I have looked at stackoverflow.com/questions/3039250/google-earth-integrated-with-google-maps-api-v3)
This library doesn't have a public method to switch programmatically, and if you try to do it before all the setup is in place, it will fail. Ideally there would be a callback after instantiating your GoogleEarth object, but lacking that you can hack around the issue by using the private showEarth_() method on the uncompiled JS.
Noting you have to wait an arbitrary amount of time before the plugin is ready, something like this should generally do the trick:
googleEarth = new GoogleEarth(map);
setTimeout('googleEarth.showEarth_();',1000);
This is all pretty hackish, so please file a feature request on the issue tracker to add in a supported method for switching to the Earth type programmatically.
Would really appreciate any help with my issue. I've been looking at this terrific tutorial by Marcin Dziewulski who integrated recent tweets and twitter user avatars onto a Google Map. Basically he places the users avatar where they last tweeted. I highly recommend checking the tutorial out here:
http://tympanus.net/codrops/2011/04/13/interactive-google-map/
It all seems to make sense except when it comes down to the actual geocoding of the user. The code works beautifully when the different tweeters are from different cities. However, let's say you wanted to track certain users in one city. They're all geocoded from the center of the city and you can only see one avatar at a time. If you refresh the page, another one will show up, in the exact same spot. This obviously isn't what I want. I assume the problems is in this bit of code:
var users = o.twitter.get(), arr = new Array;
for (i in users){
var user = users[i];
$.getJSON('http://twitter.com/users/show/'+user+'.json?callback=?', function(data) {
var img = data.profile_image_url,
screen_name = data.screen_name;
geocoder.geocode({ address: data.location }, function(response, status){
if (status == google.maps.GeocoderStatus.OK) {
var x = response[0].geometry.location.lat(),
y = response[0].geometry.location.lng();
marker = new google.maps.Marker({
icon: img,
map: map,
title: screen_name,
position: new google.maps.LatLng(x, y)
});
I think something needs to change in the geocoder.geocode({ address: data.location } bit of code, but not 100% positive. I can't seem to find the solution in the Twitter API documentation either.
My question is basically this...can the code above be altered so that it gathers more precise lat and long. coordinates from where tweets are actually generated and then display them correctly at those locations? In other words, don't just put a tweet from NYC in the middle of NYC, but place the avatar at the EXACT location.
I've tested this with my own tweets, with the the location feature of twitter enabled. I just can't figure this out! Thanks again to anyone who can help!
Best,
Brandon
The problem is that the vast majority of tweets are not geocoded but the coords are simply guessed from the user's location settings. If you wanted to display this in an interesting way, consider doing a uniform distribution of "center of city" latlongs. This is what census data map-makers often do when they don't have any more exact positioning data than say a district or a tract.
Unless the tweet was made from a mobile device it's lat/long is going to be where the ISP is registered. If I tweet from my desktop my tweets emanate from the street in front of the capitol here in Nashville. If I use my phone and I allow the twitter app to use my lat/long then that would be different. Trust me, I could instantly use the lat/long data in analysis of twitter streams and I wish it were that simple.
What you could do is add a jitter function that adds random displacement along both the x and y coordinate field to displace the tweets lat/long. Or you could grid it out. If you know how many of them you are getting you can figure out easily the bounding area of your grid and do it like that.
I'm using the Google Maps Javascript API and I have LatLng coordinates that are dynamically generated. The problem is, sometimes I get coordinates and a zoom level that creates a map view that's 'off the chart' and this confuses users into thinking their map is not working. Is there a set of coordinates I should restrict values to in order to avoid this?
Example:
map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(-89.16090481395844, 59.24382269379974),
zoom: 13,
mapTypeId: 'roadmap',
scaleControl: true,
navigationControlOptions: { style: google.maps.NavigationControlStyle.ZOOM_PAN }
});
Users don't know what's happening unless they zoom out:
Google Maps imagery stops at lat 85.0511 (-85.0511).
The value comes from features of spherical mercator projection that Google Maps is based on. You can find the formula used to calculate the value here: http://en.wikipedia.org/wiki/Mercator_projection#Uses
I've implemented a simple yahoo mapping example using JQUERY.
My problem is i'm developing using my localhost, my intended target platform is to be within an Intranet environment. My thinking is that my localhost will to some extent mimic this.
I have an update, made some progress. See the code snippet below, all ok in Firefox but in IE (my target browser) it fails on the line:
var currentGeoPoint = new YGeoPoint($('#txtLatitude').val(), $('#txtLongitude').val());
What I cannot understand is why will IE allow the MAP API Code to run and manipulate the MAP object and fail on this one line.
Could this all be to do with Tools/Intranet Options/Security and trusted sites etc? My URL locally is "http://localhost:4724/LMS/Site.mvc/Details/77" if thats any help.
$(document).ready(function() {
jQuery("textarea[class*=expand]").TextAreaExpander(); // initialize all expanding textareas, new code, john s 10/08/2010
var geoPoint;
// Create a map object
var map = new YMap(document.getElementById('map'));
// Add map type control
map.addTypeControl();
// Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_REG);
// Display the map centered on a geocoded location
map.drawZoomAndCenter("United Kingdom", 12);
// Add map type control
map.addTypeControl();
// Add map zoom (long) control
map.addZoomLong();
// Add the Pan Control
map.addPanControl();
// Set map type to either of: YAHOO_MAP_SAT, YAHOO_MAP_HYB, YAHOO_MAP_REG
map.setMapType(YAHOO_MAP_REG);
// Display the map centered on a geocoded location
map.drawZoomAndCenter("United Kingdom", 12);
var currentGeoPoint = new YGeoPoint($('#txtLatitude').val(), $('#txtLongitude').val()); // FAILS IN IE ON THIS LINE!! Unspecified Error popup dialogue box
map.addMarker(currentGeoPoint);
});
John
Have this working now, reverted back to original javascript, i'd hand rolled my own code and although neater was not working in IE. Glad to be out of the woods, cheers, J