In a webapp I´m loading a page (googlemap.asp with the map) with ajax.
I´m loading the "googlemap.asp" in a div with jquery.load and it is displaying the center in the top left corner. It is not rendering the map correctly when I load it this way.
But if I just load the "googlemap.asp" directly in the browser(without ajax) then it displays right, so I guess I have to refreash it somehow when I load it with ajax?
This is what I have:
<div id="map_canvas" style="height:600px; width:320px;" ></div>
window.onload=googleMaploadScript();
var address1 = document.getElementById('address').value;
function googleMaploadScript() {
var script =document.createElement("script");
script.type="text/javascript";
script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(57.109577,12.286513),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress(address1);
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
Since I load the page with .load is is hidden until you navigate to the div, then it becomes visible, maybe that´s the problem?
I guess I load it in the wrong order somehow, and thats why it is not rendering right, or could it be that the div is not visible at start?
Any input appreciated, thanks.
I have the same problem before
don't use
geocoder.geocode( { 'address': address}, function(results, status) {.....
when loading a page with ajax, "geocoder.geocode..." can't return correct geometry.location.
I don't why
but when I try to change my code, map is working
my code like
$.ajax({
url: "http://maps.googleapis.com/maps/api/geocode/json?address="+youraddress+"&sensor=false",
type : "POST",
dataType: "json",
cache: false,
success: function(result){
if(result.results.length){
lat=result.results[0].geometry.location.lat;
lng=result.results[0].geometry.location.lng;
//map
var map
var latlng = new google.maps.LatLng(lat, lng);
var mapOptions = {
zoom: 15,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas1'), mapOptions);
............
Developers should trigger this event on the map when the div changes size:
google.maps.event.trigger(map, 'resize')
Related
There are two places where i need to show google maps.
I'm using same code for both maps(I mean I'm reusing same code for both maps).
Below are links where you can find screen shots of those two maps.
https://drive.google.com/file/d/0B2JnvvXsAALUdlVzemRVMzNMajF4OFB1V0JXc0RuN1p4eWFV/view - map1
https://drive.google.com/file/d/0B2JnvvXsAALUVGRhNm1HSldhQnpZT3k4S2I2R1YyQkp4OWZz/view - map2
I'm showing second map(map2) in bootstarp modal
first map(map1) is working fine. But in second map(map2), though I have used setCenter method, marker is not showing at center of the map(instead it is showing at top left corner).
what should i do to place marker at center of the map(in second map)?
below is my code..
initialize: function(options){
//initializing the geocoder
this.geocoder = new google.maps.Geocoder();
this.map;
},
//on show of the view
//onShow is a marionette method, which will be triggered when view is shown
onShow: function(){
var address = this.model.get("address");
//render the map with dummy latLang
this.renderMap();
//render the Map with Proper address
if(address!== ""){
this.renderMapWithProperAddress(address);
}
},
renderMap: function(){
var mapCanvas = document.getElementById("mapCanvas"), self = this,
mapOptions = {
center: new google.maps.LatLng(64.855, -147.833),//dummy latLang
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoomControl: false,
mapTypeControl: false,
streetViewControl:false
};
//initializing google map
self.map = new google.maps.Map(mapCanvas, mapOptions);
$("#myModal").on("shown.bs.modal",function(){
google.maps.event.trigger(self.map, "resize");
});
},
renderMapWithProperAddress: function(address){
var self = this,marker;
self.geocoder.geocode( { "address": address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
self.map.setCenter(results[0].geometry.location);
marker = new google.maps.Marker({
map: self.map,
position: results[0].geometry.location,
title: address
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
My guess, without seeing your code, is that you need to trigger a map resize event after the bootstrap modal has been shown.
Bootstrap modal
Maps events
$('#myModal').on('shown.bs.modal', function () {
google.maps.event.trigger(map, 'resize');
});
Edit:
Here is a complete and working example. As per my comment, you should 1) Trigger a map resize and 2) set the map center to your marker coordinates.
var center = new google.maps.LatLng(59.76522, 18.35002);
function initialize() {
var mapOptions = {
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: center
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var marker = new google.maps.Marker({
map: map,
position: center
});
}
$('.launch-map').on('click', function () {
$('#modal').modal({
backdrop: 'static',
keyboard: false
}).on('shown.bs.modal', function () {
google.maps.event.trigger(map, 'resize');
map.setCenter(center);
});
});
initialize();
JSFiddle demo
In a webapp I´m loading a page (googlemap.asp with the map) with ajax.
I´m loading the "googlemap.asp" in a div with jquery.load and it is only displaying a small map in the top left corner, so its not getting the size 320 x 600 as I have set in the div.
It is not rendering the map correctly when I load it this way.
But if I just load the "googlemap.asp" directly in the browser(without ajax) then it displays right, so I guess I have to refreash it somehow when I load it with ajax?
This is what I have:
<div id="map_canvas" style="height:600px; width:320px;" ></div>
window.onload=googleMaploadScript();
function googleMaploadScript() {
var script =document.createElement("script");
script.type="text/javascript";
script.src="http://maps.google.com/maps/api/js?sensor=false&callback=initialize";
document.body.appendChild(script);
}
var address1 = document.getElementById('address').value;
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var mapOptions = {
zoom: 15,
center: new google.maps.LatLng(57.109577,12.286513),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
codeAddress(address1);
}
function codeAddress(address) {
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location,
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
}
I guess I load it in the wrong order somehow, and thats why it is not rendering right, or could it be that the div is not visible at start?
Any input appreciated, thanks.
Try changing Height and Width from Script.
For centering add this script to your map script it will center it . But I am also having trouble to bring it from top left to center. In my case when I change the orientation or size the map loads and centered
//script for centering
google.maps.event.addDomListener(window, "resize", function() {
var center = map.getCenter();
google.maps.event.trigger(map, "resize");
map.setCenter(center);
});
Let me know if it works . Here is the LINK for more information
I wonder if there is a way to use zipcode instead of Lat and Lng, using this snippet or using Geocoding Requests.
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(22.1482635,-100.9100755);
// var latlang = new google.maps.zipcode(7845); <- Is there a way to do that?
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
position: latlng,
map: map,
title:"zipcode"
});
}
</script>
You can use the Google GeoCode API to request the latitude and longitude for the zipcode and go from there.
The API Request URL would look like this if you wanted to do this directly or via some other medium
http://maps.googleapis.com/maps/api/geocode/json?address=50323&sensor=false
Where 50323 is your zip code.
Or you could use the google Javascript API to do this all via jQuery.
var geocoder; //To use later
var map; //Your map
function initialize() {
geocoder = new google.maps.Geocoder();
//Default setup
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
//Call this wherever needed to actually handle the display
function codeAddress(zipCode) {
geocoder.geocode( { 'address': zipCode}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
//Got result, center the map and put it out there
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
I would like to use GoogleMaps API v3.
Before, I was using version n°2 and I had just to put the address and the map was displayed.
Is it always possible with version n°3 ?
If yes, how ?
I always find scripts with latitude, longitude... but no script with address.
Thanks a lot and sorry for my poor english.
I guess you mixed up Maps-Javascript-API and the Static-Maps-API(current Version is V2).
In the static-maps-API you may use an address as center-parameter.
In the Javascript-APIs you need a LatLng (no matter if V2 or V3). If you only have an adress, you must request the LatLng using a geocode-request.
Basically you need to look for something called geocode. It is a part of API documentation. something like below will help:
var geocoder;
var map;
function initialize() {
geocoder = new google.maps.Geocoder();
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
function codeAddress() {
var address = document.getElementById("address").value;
geocoder.geocode( { 'address': address}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: map,
position: results[0].geometry.location
});
} else {
alert("Geocode was not successful for the following reason: " + status);
}
});
}
Helpful Link
Goal: Get the TEXT address and then display the street view and map view at the same time
Ref Site:
http://code.google.com/apis/maps/documentation/javascript/examples/streetview-simple.html
My site:
http://www.iamvishal.com/dev/property/P2154 (pls click the map view to see the map)
Problem: I am able to display the map and the address correctly but instreet view does not change. Any idea why ?
My js variable address hold the text address in this case "323235 Balmoral Terrace Heaton Newcastle Upon Tyne"
function initialize()
{
var fenway = new google.maps.LatLng(42.345573,-71.098326);
var mapOptions = {
center: fenway,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map_canvas"), mapOptions);
var panoramaOptions = {
position: fenway,
pov: {
heading: 34,
pitch: 10,
zoom: 1
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById("pano"),
panoramaOptions);
map.setStreetView(panorama);
var geocoderTwo = new google.maps.Geocoder();
geocoderTwo.geocode({"address":address},function(results, status)
{
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker
({
map: map,
position: results[0].geometry.location
});
}
else
{
alert("Geocode was not successful for the following reason: " + status);
}
}
);
}
Here's how I've created a streetview before:
function createStreetMap(strMapCanvasID, yourLatLng)
{
var panorama;
//once the document is loaded, see if google has a streetview image within 50 meters of the given location, and load that panorama
var sv = new google.maps.StreetViewService();
sv.getPanoramaByLocation(yourLatLng, 50, function(data, status) {
if (status == 'OK') {
//google has a streetview image for this location, so attach it to the streetview div
var panoramaOptions = {
pano: data.location.pano,
addressControl: false,
navigationControl: true,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL
}
};
var panorama = new google.maps.StreetViewPanorama(document.getElementById(strMapCanvasID), panoramaOptions);
// lets try and hide the pegman control from the normal map, if we're displaying a seperate streetview map
objCreatedMap.setOptions({
streetViewControl: false
});
}
else{
//no google streetview image for this location, so hide the streetview div
$('#' + strMapCanvasID).parent().hide();
}
});
}
Update: and you could call this function directly from within your existing code (I've amended the function to use a LatLng rather than individual latitude and longitude values:
if (status == google.maps.GeocoderStatus.OK)
{
map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker
({
map: map,
position: results[0].geometry.location
});
createStreetMap('yourStreetViewDiv', results[0].geometry.location);
}
There are a couple issues with your code. Fix them first:
64 Uncaught ReferenceError: berkeley is not defined
Also, you'll need to set a zoom and mapTypeId options on your Map before anything shows.