[SOLVED] Store Locator Google map ~ Resize info box

[PeteFF]

Can someone tell me where to make the changes to resize the info box in the Google map?

 

Thanks

 

http://fotograaf-noord-brabant.com/en/stores

[Sharak]

Check line 31 in /themes/default/css/stores.css to change the map size.

In /themes/default/stores.tpl wrap related code in a <div> section like this:

<div style="width:250px; float:left;">
	<p>{l s='Enter a location (e.g. zip/postal code, address, city or country) in order to find the nearest stores.'}</p>
	<p>
		<label for="addressInput">{l s='Your location:'}</label>
		<input type="text" name="location" id="addressInput" value="{l s='Address, zip / postal code, city, state or country'}" onclick="this.value='';" />
	</p>
	<p>
		<label for="radiusSelect">{l s='Radius:'}</label> 
		<select name="radius" id="radiusSelect">
			<option value="15">15</option>
			<option value="25">25</option>
			<option value="50">50</option>
			<option value="100">100</option>
		</select> {$distance_unit}
		<img src="{$img_ps_dir}loader.gif" class="middle" alt="" id="stores_loader" />
	</p>
	<p class="clearfix">
		<input type="button" class="button" onclick="searchLocations();" value="{l s='Search'}" style="display: inline;" /> 
	</p>
	<div><select id="locationSelect"><option></option></select></div>
</div>

Edited January 1, 2014 by Sharak (see edit history)

[vekia]

i don't think so, it's related to "map" block (whole block with map) not to this  "info" window.

 

 

 

to change info window it's necessary to modify infoWindow feature (google api) contents.

 

http://fotograaf-noord-brabant.com/themes/default/js/stores.js

 

there is a code:
 

function createMarker(latlng, name, address, other, id_store, has_store_picture)
{
	var html = '<b>'+name+'</b><br/>'+address+(has_store_picture === 1 ? '<br /><br /><img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" alt="" />' : '')+other+'<br /><a href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a>';
	var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
	var marker = '';

	if (hasStoreIcon)
		marker = new google.maps.Marker({ map: map, icon: image, position: latlng });
	else
		marker = new google.maps.Marker({ map: map, position: latlng });
	google.maps.event.addListener(marker, 'click', function() {
		infoWindow.setContent(html);
		infoWindow.open(map, marker);
	});
	markers.push(marker);
}

instead of 

var html = '<b>'+name+'</b><br/>'+address+(has_store_picture === 1 ? '<br /><br /><img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" alt="" />' : '')+other+'<br /><a href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a>';
    var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
    var marker = '';

use

var html = '<div class="myinfowindow"><b>'+name+'</b><br/>'+address+(has_store_picture === 1 ? '<br /><br /><img src="'+img_store_dir+parseInt(id_store)+'-medium.jpg" alt="" />' : '')+other+'<br /><a href="http://maps.google.com/maps?saddr=&daddr='+latlng+'" target="_blank">'+translation_5+'<\/a></div>';
    var image = new google.maps.MarkerImage(img_ps_dir+logo_store);
    var marker = '';

then with css styles you can define size of infoWIndow

for example:

.myinfowindow {
width:500px;
height:200px;
}

[PeteFF]

Hi Milos

 

In which "css styles" do i add the additional code?

[vekia]

you can add it to http://fotograaf-noord-brabant.com/themes/default/css/stores.css or to the main css styles file in your shop: global.css

[PeteFF]

Thanks

 

All done now 

[vekia]

i can confirm now looks very very well

 

 

i marked whole topic as [solved]

 

with regards,

Milos

[admin@wolfkanat]

you can add it to http://fotograaf-noord-brabant.com/themes/default/css/stores.css or to the main css styles file in your shop: global.css

 

Hi Vekia hoping you can help as i saw this post - My map works fine, except for the text being not visible. Everytime the main body code area keeps effecting it - its like theres an overlay- any ideas on where /what file to edit for the box  in terms of colour or code to add. I've looked and canned through various files but cant seem to find the code to relate to it

Anyone with any idea ? 

thanks

 

 wolfkanat.com.au/stores

 

Edited May 2, 2017 by admin@wolfkanat (see edit history)