I have an html table that contains 10 container for Google map
Below is the js function that create the map object
Function takes the lat and the lng of the map + the div element to insert the map to.
function GetMap(lat,lng,number)
{
var show_in=document.getElementsByClassName("map_conteiner")[number];
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(show_in,
mapOptions);
var marker = new google.maps.Marker({
position:new google.maps.LatLng(lat,lng),
map: map,
title:"Hotel"
});
$(show_in).fadeIn();
}
The problem is that the map is displayed correctly only on the first invoke of this function
(No matter which div I start with)
after the firts invoke this function will allways present distorted maps (As you can see in the attached picture)
You should trigger the resize-event of the map in the complete-callback of $.fadeIn()
Furthermore you better create only 1 maps-instance for each map_conteiner and on subsequent calls of GetMap only set the new center of the existing map and the new position for the marker.
Related
I am trying to create a website that has a google map in one column and in the second is a list of items with location elements. On clicking one of these items, I would like to drop a pin in the google map. I am having trouble updating the markers on the google map. I can add one marker at initialization of the map, but cannot get new markers to be dropped. Here is my code: https://gist.github.com/aarongirard/32f80f17e19d3e0389da. The issue occurs in the if else clause within the click function.
Any help is appreciated!!
//global variables //google map
var map;
var marker;
var currentMakerli;
function initialize() {
//set latlng of starting window of map
var mapOptions = {
center: { lat: 34.073609, lng: -118.562313},
zoom: 14,
};
//set map using above options and attach to given element
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
//construct new marker; constructor takes an object with position and title properties
//get lat long for first marker
var latlng = new google.maps.LatLng(34.073514, -118.562348);
marker = new google.maps.Marker({
position: latlng,
map: map,
title: "Home"
});
//on click of li add new marker or remove if marker already exists
$(".DataList li").click(function(){
//if current marker set to this already
//remove marker
if ( $(this).attr('id') === 'current') {
marker.setMap(null);
$(this).attr('id', '');
} else {
$(this).attr('id','current');
var latlngarr = getLatLngFromString($(this).attr('data-position'));
var lat = latlngarr[0];
var lng = latlngarr[1];
thisLatlng = new google.maps.LatLng(lat,lng);
var marker = new google.maps.Marker({
position: latlng,
map: map,
});
//marker.setMap(map);
}
});
}
//set map
google.maps.event.addDomListener(window, 'load', initialize);
function getLatLngFromString(string){
var array = string.split(',');
array[0] = parseFloat(array[0]);
array[1] = parseFloat(array[1]);
return array;
}
You must store the marker in a way in which you are able to get a relation between the <li> and the marker, e.g. via $.data
simple example:
function initialize() {
//set latlng of starting window of map
var map = new google.maps.Map($('#map-canvas')[0], {
center: { lat: 34.073609, lng: -118.562313},
zoom: 14,
disableDefaultUI:true
}),
home = new google.maps.Marker({
position: { lat: 34.073514, lng: -118.562348},
map: map,
title: "Home",
icon:'http://maps.google.com/mapfiles/arrow.png'
});
map.controls[google.maps.ControlPosition.TOP_LEFT].push($(".DataList")[0]);
//on click of li add new marker or remove if marker already exists
$(".DataList li").click(function(){
var that=$(this);
//when there is no marker associated with the li we create a new
if(!that.data('marker')){
that.data('marker',new google.maps.Marker({position:(function(ll){
return new google.maps.LatLng(ll[0],ll[1]);
}(that.data('position').split(/,/)))}));
}
var marker=that.data('marker');
//simply check the markers map-property to decide
//if the marker has to be added or removed
if(marker.getMap()){
that.removeClass('current');
marker.setMap(null);
}
else{
that.addClass('current');
marker.setMap(map);
}
});
}
google.maps.event.addDomListener(window, 'load', initialize);
html,body,#map-canvas{height:100%;margin:0;padding:0}
.current{background:#f1f1f1;}
.DataList{background:#fff;padding:0;}
.DataList li{cursor:pointer;padding:4px;list-style-position:inside;}
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3"></script>
<ul class="DataList">
<li data-position="34.0717825, -118.567396">Santa Ynez Canyon Park</li>
<li data-position="34.0787989, -118.572502">Palisades Country Estates</li>
<li data-position="34.078375, -118.56098">Highland Recreation Center</li>
</ul>
<div id="map-canvas"></div>
Related to the comments:
You didn't mess up with variable-names, my examples uses less variables, but you may use more variables when you want to.
I prefer to avoid variables when I need to access an object only once.
The marker will be created here(and stored as a property of the <li/>):
//when there is no marker associated with the li we create a new
if(!that.data('marker')){
that.data('marker',new google.maps.Marker({position:(function(ll){
return new google.maps.LatLng(ll[0],ll[1]);
}(that.data('position').split(/,/)))}));
}
The part that splits the data-position-attribute is this:
(function(ll){
return new google.maps.LatLng(ll[0],ll[1]);
}(that.data('position').split(/,/)))
It's a so-called "self-executing anonymous function", which returns the desired value(a LatLng) which will be used as position of the Marker. The splitted data-position-attribute will be used as argument for this function
that.data('position').split(/,/)
getMap() returns whatever the map-property has been set to, either a google.maps.Map-instance or null (when you want to remove the marker or when the property is not set). Although it's not a boolean value it evaluates to either true(when it's a map) or false(when it's null), so it may be used as condition.
The that-variable is always a new variable, that's correct, but it will always be a reference to the same object, the clicked <li/>. The marker has been stored as property of this object.
I have created a google map using "maps.googleapis.com/maps/api/js?v=3". In that map I am showing markers for different locations, which is working fine. Below is the code which i have used.
google.maps.event.addDomListener(window, 'load', function() {
var map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});
Now I want to add some more location markers in Ajax. For ex: I will add the location name from a dropdown, it will do an ajax call to the server side. Pull out the location latitude and longitude and will show in the map. How can i achieve it.
I have written a separate js function to do the ajax call, but inside that the code is not getting 'map' instance.Here I have used only this code
new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
Here I am not initializing the map again. So its not getting the map instance and throwing error. How to fix it.
The scope of your map is limited to inside your event handle. Try this:
var map, markerCollection;
google.maps.event.addDomListener(window, 'load', function() {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
});
function addMarker(lat, lng){
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(lat, lng),
});
markerCollection.push(marker);
}
NOTES:
1) Be to fill in the values for "latitude" and "longitude" when defining the center of your map. Otherwise you just would get a map displayed.
2) I know it might not be the best practice to add your markers into an array but I find this makes than easy to access latter.
Since map is not a global variable it is getting dereferenced. Make the map object either global or within a container function that stores all of your code.
Global JS example
//now it's global
var map;
google.maps.event.addDomListener(window, 'load', function () {
map = new google.maps.Map(document.getElementById('map1'), {
zoom: 10,
center: new google.maps.LatLng(latitude, longitude),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
map: map,
position: new google.maps.LatLng(23.42323, -45.47653),
});
});
I'm using Google Maps version 3 and would like to add two markers for a single location on the map.
One would be the default marker which appears with Google Maps, but second would show the name of the brand associated with that location.
My code is
function initialize() {
var filterLatlng = new google.maps.LatLng(18.928184,72.832601);
var mapOptions = {
center: filterLatlng,
zoom: 19,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var marker = new google.maps.Marker({
position: filterLatlng,
title:"Filter Shop"
});
var map = new google.maps.Map(document.getElementById("map"), mapOptions);
marker.setMap(map);
}
You probably want this library:
http://code.google.com/p/google-maps-utility-library-v3/source/browse/trunk/maplabel/src/maplabel.js?r=303
It will allow you to add a label on the map.
That label will be attached to a hidden marker like you described.
The use is quite simple you should be able to figure it out quite easy.
I am trying to combine two separate methods to display both markers and polylines on one map. Is it possible? and if so how would I do this. Or conversely how would I add polylines to my markers sample.
From http://you.arenot.me/2010/06/29/google-maps-api-v3-0-multiple-markers-multiple-infowindows/
Without my actual code I appreciate this is a probably a wasted post.. but I am having trouble adding my code..
Perhaps that should have been my first question..
This script will add markers and draw a polyline between them:
<script>
var poly;
var map;
function initialize() {
var chicago = new google.maps.LatLng(41.879535, -87.624333);
var mapOptions = {
zoom: 7,
center: chicago,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
var polyOptions = {
strokeColor: '#000000',
strokeOpacity: 1.0,
strokeWeight: 3
}
poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
// Add a listener for the click event
google.maps.event.addListener(map, 'click', addLatLng);
}
/**
* Handles click events on a map, and adds a new point to the Polyline.
* #param {MouseEvent} mouseEvent
*/
function addLatLng(event) {
var path = poly.getPath();
// Because path is an MVCArray, we can simply append a new coordinate
// and it will automatically appear
path.push(event.latLng);
// Add a new marker at the new plotted point on the polyline.
var marker = new google.maps.Marker({
position: event.latLng,
title: '#' + path.getLength(),
map: map
});
}
</script>
Excellent Documentation available here:
https://developers.google.com/maps/documentation/javascript/reference
https://google-developers.appspot.com/maps/documentation/javascript/examples/polyline-complex
It is certainly possible to display markers and polylines on the same map:
Here is an example that displays both markers and independent polylines.
Here is an example that uses the third party geoxml3 KML parser to create them from a KML file (or using KmlLayer).
I've found custom Google Maps icon images that can be laid out as a sprite (matrix of small pics). I effectively want to create custom icons which are numbered 1-10 (for my 10 results per page) and also have mouseover effects (change color).
I'm not sure how to do this. The relevant code is the following:
$('.entries').each(function(index){
var entry=$(this);
latlng[index]=new google.maps.LatLng($(this).attr('data-lat'),$(this).attr('data-lng'));
marker[index]=new google.maps.Marker({
position:latlng[index],
map:map,
icon:image_url
});
if(marker[index]){
marker[index].setMap(map);
}
Even if I can't make it a sprite (which seems unlikely right now) I'd like to change the icon on mouseover.
I've tried to do so and created a hack that SORT of works. The problem here is that the map flickers occassionally when reset. Is there a better way?
google.maps.event.addListener(marker[index],'mouseover', function(){
entry.addClass('map-hover');
// alert(marker[index].icon);
marker[index].icon='{{site}}media/map-icons/iconb'+(index+1)+'.png'
marker[index].setMap(map);
});
google.maps.event.addListener(marker[index],'mouseout', function(){
entry.removeClass('map-hover');
marker[index].icon='{{site}}media/map-icons/iconr'+(index+1)+'.png'
marker[index].setMap(map);
});
function initialize() {
var mapDiv = document.getElementById('map-canvas');
var latLng = new google.maps.LatLng(37.4419, -122.1419);
var map = new google.maps.Map(mapDiv, {
center: latLng,
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var image = 'http://code.google.com/apis/maps/documentation/javascript/examples/images/beachflag.png';
var myLatLng = new google.maps.LatLng(-33.890542, 151.274856);
var beachMarker = new google.maps.Marker({
position: latLng,
map: map,
icon: image
});
}
This code might help you to get an idea about placing custom markers.