Googlemap v3 infoWindow auto resize after hidden div was shown - google-maps-api-3

I'm writing an web page with google map & I got some trouble;
I hava an InfoWindow which contain an hidden div, and I want to show it when I click a button in the infoWindow. But the question is when I show the hidden div the size of the infoWindow wouldn't adapt to new content automatically.
Would you please give some advices to solve this problem? Thanks a lot :-)
Here is my js:
function redraw() {
var cmt = $("#bodyContent");
cmt.show();
}
var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
var contentString = '<div id="content">'+
'<h2 id="firstHeading" class="firstHeading">Uluru</h2>'+
'<input type="button" value="Test" onclick="redraw()" />' +
'<div id="bodyContent" class="test">'+
'<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large ' +
'sandstone rock formation in the southern part of the '+
'Northern Territory, central Australia. It lies 335 km (208 mi) '+
'south west of the nearest large town, Alice Springs; 450 km '+
'(280 mi) by road. Kata Tjuta and Uluru are the two major '+
'features of the Uluru - Kata Tjuta National Park. Uluru is '+
'sacred to the Pitjantjatjara and Yankunytjatjara, the '+
'Aboriginal people of the area. It has many springs, waterholes, '+
'rock caves and ancient paintings. Uluru is listed as a World '+
'Heritage Site.</p>'+
'</div>'+
'</div>';
infowindow = new google.maps.InfoWindow({
maxWidth: 300,
content: contentString
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"Uluru (Ayers Rock)"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

Related

How to change the nuxt gmap marker icon size?

I added the marker like this.How can I shrink the png I have added to the Marker?
<GMap
v-if="car"
ref="gMap"
:center="{ lat: car.data.posLatitude, lng: car.data.posLongitude }"
:zoom="6"
>
<GMapMarker
:position="{
lat: this.geolocation.results[0].geometry.location.lat,
lng: this.geolocation.results[0].geometry.location.lng,
}"
:options="{ icon: require('../../../assets/home.png') }"
>
</GMapMarker>
<GMapMarker
:position="{ lat: car.data.posLatitude, lng: car.data.posLongitude }"
:options="{ icon: require('../../../assets/car.png') }"
>
</GMapMarker>
</GMap>
screenshot like this. I want to shrink the icon
Assuming your GMapMarker component handle your actual icon image rendering, you can manipulate it like so:
var icon = {
url: "../res/sit_marron.png", // url
scaledSize: new google.maps.Size(50, 50), // scaled size
origin: new google.maps.Point(0,0), // origin
anchor: new google.maps.Point(0, 0) // anchor
};
<GMapMarker :icon="icon"></GMapMarker>
then inside your GMapMarker component, you can render it like so:
// grab icon from the props and use it as needed:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
icon: icon
});
More info here in official docs - https://developers.google.com/maps/documentation/javascript/examples/icon-complex#maps_icon_complex-javascript

Make Marker Non Draggable from Map Option

In my application two markers have been shown and in between these maker a route has been formed.
My task is to prevent marker to drag from the map option; because I have not taken any reference or variable with respect to the marker.
I have tried with the following code .
var mapOptions =
{
zoom: 7,
center: mumbai,
draggable: false
};
map = new google.maps.Map(document.getElementById('dvMap'), mapOptions);
And,
map.setOptions({draggable: false});
Both the way are not working for me.
The draggable should be inside the marker options and not inside the map options. What you're doing will surely not work. draggable should be like this:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
draggable:false,
title:"You can't drag me!"
});
Also, markers are supposed to be not draggable if the draggable option is not set at all like this:
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title:"You can't drag me!"
});
So if you are not adding this to your marker, it should not be draggable, just as what's needed for your use case.
Hope this helps!

What jQuery map plugin allows specifying the color of the pushpins?

I have used the goMap jQuery plugin for some easy and simple programmatic placing of pushpins on Google maps; I'm going to create a site, though, where various "categories" of places are shown simultaneously, and I want to differentiate them visually by making each group/category a different color.
Is anybody aware of either how this can be done in goMap, or which jQuery plugin makes it possible? I'm not married to Google maps; Bing maps would be fine, too.
You don't really need a plugin, just create the different markers in your js, for example:
App.pinColor1 = '37BDED';
App.pinColor2 = 'AA0774';
App.pinImage1 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=home|" + App.pinColor1,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
App.pinImage2 = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_icon&chld=books|" + App.pinColor2,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
App.pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
And then where you create the marker (along with your other options):
App.marker = new google.maps.Marker(
{
icon: App.pinImage1,
shadow: App.pinShadow,
});
It seems there are two good possibilites. One is to use gmaps.js (http://hpneo.github.io/gmaps/examples/static_markers.html) which lets you specify a color like so (in the third of the three markers added below):
url = GMaps.staticMapURL({
size: [610, 300],
lat: -12.043333,
lng: -77.028333,
markers: [
{lat: -12.043333, lng: -77.028333},
{lat: -12.045333, lng: -77.034, size: 'small'},
{lat: -12.045633, lng: -77.022, color: 'blue'}
]
});
and the other is goMaps, which I've already used, which has an icon property you can set to a .png file. The example can be seen here: http://www.pittss.lv/jquery/gomap/examples/marker_multi.php
using this sort of code:
$(function() {
$("#map").goMap({
markers: [{
latitude: 56.948813,
longitude: 24.704004,
title: 'marker title 1'
},{
address: 'Mokelumne Hill, California, USA',
title: 'marker title 1'
},{
latitude: 55.548813,
longitude: 23.204004,
draggable: true,
icon: '../img/drag.png',
html: {
content: 'drag me!',
popup:true
}
}],
icon: '../img/apartment.png'
});
});
Now I have a separate question, though, regarding how to use a spriteful of pushpin images (How can I use a sprite to specify the pushpin png I want to use in a map?)

infoWindow is not shown in the center of the map

Here is the code I'm using to show markers and infoWindows. It's working perfectly.
mapOptions = {
zoom: zoom,
center: getMyCompanyCoordinates,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map($(this)[0], mapOptions)
infowindow = new google.maps.InfoWindow()
createMarker = (company)->
marker = new google.maps.Marker({
position: new google.maps.LatLng(company.latitude, company.longitude),
map: map
})
google.maps.event.addListener(marker, 'click', ()->
infowindow.setContent('content')
infowindow.open(map,this)
)
return marker
firstCompanyMarker = createMarker(companiesData[0])
createMarker(companiesData[i]) for i in [1..companiesData.length-1] by 1
google.maps.event.trigger(firstCompanyMarker, 'click')
However, there is one issue. The infoWindow of the default (firstCompanyMarker) marker is not showing as I need. It's crossing the top edge of the map.
I tried to move the center but there was no result.
lat += 100 #or lat -=100. Anyway it does NOT work
long += 100 # it does work but it's moving the center
#of the map to the left or the right and it's not what I need
mapOptions = {
zoom: zoom,
center: new google.maps.LatLng(lat, long),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
Your ideas? How do I make infoWindow to be shown in the center of the map and to not cross the top edge of it?
Add a the following line after "infowindow.setContent('content')"
map.setCenter(marker.lat-100, marker.lng-100);
However, this is not a real solution. From experience I can tell you that you map is very little for the standard infowindow. You have really 2 options to solve this:
1) Increase the size of the map so the default infowindow will show with the marker in the center of the map or
2) Use a custom infowindow and make it a lot smaller than the default one
Hope that helps!
map.setCenter(marker.lat, marker.lng- (popup.getheight/2));
This should work.
Late answer for the sake of anyone stumbling on this. I had the same problem and noticed that if I closed the infoWindow and clicked the marker, the infoWindow would open and pan to the correct position. Instead of triggering a click, waiting for the tilesloaded event before opening the initial infoWindow was the key.
// Trigger click after tiles are loaded so auto-pan positions infoWindow correctly
google.maps.event.addListenerOnce( map, 'tilesloaded', function () {
infoWindow.open( map, marker );
} );

Google Maps JS API v3 marker color

I'm using a fantastic library of code that allows me to have many specific markers with css styled info boxes. In addition, I'd like to have three different categories of colored markers signifying 3 different rivers on a map. Although there are many posts that explain how to color a marker, my code crashes if I use these approaches. I need help with how to assign the specific color to each location. Except for numerous more locations, here is my code with the default red marker:
var locations = [
['<div id="mm-img"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-00-sm.jpg" /><h3>Mile Marker 0 East</h3><p>Old east channel river mouth, now East Waterway. Spokane street fishing pier. Location of historic river mouth, east channel Duwamish River.<br /><span style="font-size:10px;line-height:300%">photo: UW University Libraries</span></p></div>', 47.573600, -122.343585, 1],
['<div id="mm-img"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/Ed-01-sm.jpg" /><h3>Mile Marker 1 East</h3><p>Kellog Island, Federal Center South, Diagonal Way, Oxbow Building, Shoreline Access. Proposed mile marker design for new Corps of Engineers building on the Duwamish River.</p></div>', 47.560398, -122.341732, 2],
['<div id="mm-img"><img src="<?php echo $this->getThemePath()?>/mile-marker-img/BR-LWO-sm.jpg" /><h3>Old Lake Washington Outlet</h3><p>Renton airport. Near Black River resort. View of Resort on Lake Washington prior to 1916, when the lake emptied via the Black River into the Duwamish.<br /><span style="font-size:10px;line-height:300%">photo: Renton Historical Museum</span></p></div>', 47.491100, -122.217169, 38]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(47.524501, -122.319785),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
}
})(marker, i));
}
Thank you Hungerstar for coming up with an equally good solution. Unfortunately, if I was to use your coding, I would have to rewrite much of what I've already done. With the combination of a friend's help and this link, I had to complete 4 steps for me to get different colored markers with everything in columns in locations.
1) You have locations with
[popup with a bunch of text, 47.491100, -122.217169, "blue", 38]
2) You put in the variable, array, describing what you are getting
var icons = new Array();
icons["red"] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_red.png",
3) The really sneaky part, code I had to simply copy from another guy's code, was how to name the color
if (!icons[iconColor]) {
icons[iconColor] = new google.maps.MarkerImage("http://labs.google.com/ridefinder/images/mm_20_"+ iconColor +".png",
4) and lastly, you get the icon with
map: map,
icon: getMarkerImage(locations[i][3])
For me the simplest way is use
Google dynamic icons generator
For example:
https://chart.googleapis.com/chart?chst=d_map_pin_letter&chld=%E5%8D%B1|FF0000|000000
Not sure what the criteria for select which color your going to use. Is it the last value in location array?
I use a png sprite for my markers so for each marker I have something like this:
var redIcon = new google.maps.MarkerImage(
ABSPATH + 'images/map-icons.png',
new google.maps.Size( 20, 25 ),
new google.maps.Point( 0, 60 ),
new google.maps.Point( 10, 85 )
);
Then you determine which color to use and attach it to the marker:
if ( locations[i][3] == 38 ) {
icon = redIcon;
} else {
icon = bluIcon;
}
marker.setIcon( icon );

Resources