I want to reload google map with new markers when the user select an option from the select field.Please help me how to refresh/reload google map with new markers.
Right now the store is getting reloaded from the change option the the select field. But the markers are not getting refreshed and are still showing the old results.
I'm trying :
mapToRefresh = Ext.getCmp("mapaSearch");
mapToRefresh.update(mapPositions[0]);//mapPosition is the new lat,long
mapToRefresh.rendered = false;
mapToRefresh.render();
But it's not working.i'm getting this error:
Uncaught TypeError: Cannot read property 'ownerDocument' of null
Thanks
I had the same issue with the map. It would be much more simpler and efficient to clear the markers and update the map with the new markers on select change.
If you need to render the map the best way to achieve this is to destroy the map and recreate it again on select change.
Hope this helps.
This problem occurs when the site is connected to two google maps.
And on another page of one of the map is not available. You must add it and hide...
Example:
var mapOptions = {
zoom: 17,
center: new google.maps.LatLng(59.938863, 30.311556),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'map_style']
}
};
var mapOptionsNew = {
zoom: 17,
center: new google.maps.LatLng(59.939119, 30.317952),
mapTypeControlOptions: {
mapTypeIds: [google.maps.MapTypeId.ROADMAP,'map_style']
}
};
map = new google.maps.Map(document.getElementById('id-map'),apOptions);
mapNew = new google.maps.Map(document.getElementById('id-map1'),mapOptionsNew);
Related
The Google map on my site no longer shows up. I can see the zoom in/out slider, map/satellite buttons, etc... but the map itself no longer shows up. I read somewhere that the map should be in a div tag labeled "map" with both height and width stated in the CSS. The map has always had height/width CSS properties listed, but the ID was labeled differently. I changed the ID to map and corresponding CSS, but the map still will not show up. I read elsewhere that the Google Analytics by Yoast plugin was also causing similar errors. I have disabled all plugins and then one at a time I have reactivated them to see if another plugin might be the issue. However, it seems that none of the plugins running have any effect on the map displaying.
I am a web designer with some HTML/CSS knowledge. I designed this site and had hired a guy to code it into a custom Wordpress theme for me. Like I said, the map had been showing just fine, but no longer does and I have no idea why. I could really use some help to figure this out. I'm trying to learn more about coding so in the future I can debug and fix things like this on my own. A little help would be greatly appreciated!
Here is a link to the page with the map: http://seegerlaw.com/contact-us/
Please let me know if you need any other information from me.
You're using undocumented fields:
function initialize() {
geocoder = new google.maps.Geocoder();
codeAddr(function(lat, lng) {
myLatlng = new google.maps.LatLng(lat,lng);
var mapOptions = {
zoom: 15,
center: myLatlng,
disableDefaultUI: false,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);
var marker = new google.maps.Marker({
position: myLatlng,
map: map
});
});
}
function codeAddr(callback) {
if (geocoder) {
geocoder.geocode({ 'address': address }, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
console.log(results[0].geometry);
maps_lat = results[0].geometry.location["kb"];
maps_lng = results[0].geometry.location["lb"];
callback(maps_lat, maps_lng);
}
else {
console.log("Geocoding failed: " + status);
}
});
}
}
Use the lat() and lng() properties of LatLng to get their values.
Even better, just pass in the LatLng directly from the Geocoder to the MapOptions object:
codeAddr(function(latLng) {
var mapOptions = {
center: latLng,
...
};
...
});
callback(results[0].geometry.location);
Even better – it appears that you always geocode the same address – just hardcode the LatLng into your code.
I have set a google maps (api v3) on div.
Then I want to retrieve the map via the div.
Doing something like
theMap = $('.myDiv').theGoogleMap;
I can't find this simple info. Thank you for your help.
Maybe this it's too late for the original poster, but might helpful for others. I also spent some time searching before solving it by myself. Turns out to be really simple.
Assuming the div that holds the map looks like this:
<div id="myMap"></div>
When creating the map, add a reference to map object as a property to the document element that holds the map:
// Create the map
originalMapObject = new google.maps.Map('myMap', map_options);
// Get the DOM Element
var element = document.getElementById('myMap');
// Create a random property that reference the map object
element.gMap = originalMapObject;
When you need the map object again, just do something like this
gmap = document.getElementById('myMap').gMap
Hope it helps.
well, you can't do that, you can declare a global variable and save in that variable the reference to the map object. Look at the sample in the google documentation.
var map;
function initialize() {
var myOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
Also here is a Javascript tutorial:
https://developer.mozilla.org/en/JavaScript/Guide
The API doesn't work that direction. You must retain a reference to the object in javascript when you create it. You cannot lookup the map object from the DOM reference.
Google Maps javascript API question - Map object recenters after applying KML layer. How do I prevent this?
I created a simple page with a map. When I apply a simple polygon KML, it recenters and zooms the map. Any ideas?
var myOptions = {
center: new google.maps.LatLng(27, -97),
zoom: 17,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml');
buildings.setMap(map);
//i tried this to recenter and zoom, but no dice.
var posn = new google.maps.LatLng(27, -97);
map.setCenter(posn);
map.setZoom(17);
Sounds like you need the preserveViewport option. From the documentation:
By default, the input map is centered and zoomed to the bounding box of the contents of the layer. If this option is set to true, the viewport is left unchanged, unless the map's center and zoom were never set.
Pass it a KMLLayerOptions object through the constructor:
var buildings = new google.maps.KmlLayer('https://mysite/site/buildings.xml',{preserveViewport:true});
I'm using jQuery mobile and I have to display some maps.
I'm using a function that create maps every time that I click on the specific link but after the generation of the first map, the others are displayed wrong.
Here an example,
First map:
Other maps:
I use a function like this:
function buildMap(div){
var coord = new google.maps.LatLng(lat, lng);
var options = {
zoom: 13,
scrollwheel: false,
scaleControl: true,
mapTypeControl: false,
center: coord,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(div, options);
return map;
}
Can you help me?
Thank you!!
Problem solved, you need to create the map on the "pageshow" event (an event of jQuery mobile):
$('#map_page').live('pageshow',function(event, ui){
buildResultMap('#map_canvas');
});
The solution is to trigger the resize event OR not to use Ajax. Phill has guided you to an example how it's done with the jQuery Mobile Google maps plugin which uses Ajax (and calls $('#map_canvas').gmap('refresh'); on pageload. The plugin is very easy to use (especially if you already know Google maps syntax).
I am trying to create a site that has option to add maps to the site using google maps api. I found hundreds of tutorial and blog posts on embeding map in the site. But what I actually want is a way to give the user choose a place on the map and add marker. Then get the co-ordinates of the marker and store it in the database of retrieving and showing in the front-end. I have seen this option given wordpress plugins like mappress. But now I'm trying to achieve this in codeigniter. I can't find any thing to start on. Can any one point out some one tell me where to start?
This is really easy the 3rd version of the Google maps API. Versions before that where much more complicated, and most of the tutorials floating around are for those versions. Have a look through the API documentation and examples.
Adding a marker is as simple as:
var marker=new google.maps.Marker({/* ... see API */});
Adding an event (eg click) to a marker is as simple as:
var marker_click=new google.maps.event.addListener(
marker,
'click',
function() {/*...*/});
Sounds like you'd want a click event for the map, which you'd translate into a latlong, then (a) generate a marker on the map with JS, and (b) post that back to your server using AJAX, or by storing the values in a hidden form field to be submitted after.
Update:
Mostly from the API documentation # http://code.google.com/apis/maps/documentation/javascript/events.html:
var map;
function initialize() {
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
google.maps.event.addListener(map, 'click', function(event) {
placeMarker(event.latLng);
});
}
function placeMarker(location) {
var clickedLocation = new google.maps.LatLng(location);
var marker = new google.maps.Marker({
position: location,
map: map
});
map.setCenter(location);
/*Do your processing here:
* eg. ajax.post('addMarkerDB&lat='+location.lat+'&long='+location.long);
*/
}
Note: There is no ajax.post function by default, but there could be :)