Databases
StackOverflow2013
Postsdbo
POAdd multiple different complex icons AND info boxes to google maps api V3
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAdd multiple different complex icons AND info boxes to google maps api V3
    text
    copied!<p>I'm developing a site for some holiday accommodation (it's my first site development).</p> <p>I've been working on the location page with google maps api V3 and want to take it further. At the moment I have just two custom markers - but want to extend this so I have around 20, to show various things to do in the area. These will be divided into categories such as 'family' and 'shopping', each category having a different marker icon. So I will need say 5 different icon styles, each style at around 4 different locations. On top of this I will need an info box on each, which will popup when the marker is clicked, and will disappear when another marker is clicked.</p> <p>I'm brand new to javascript and it still looks very complicated to me, so if anyone can explain how to do this it would be greatly appreciated. Current code below, and how it currently looks is here: <a href="http://www.upthorpelodges.co.uk/test/location.html" rel="nofollow">http://www.upthorpelodges.co.uk/test/location.html</a></p> <pre><code>&lt;script type="text/javascript"&gt; function initialize() { var mapOptions = { center: new google.maps.LatLng(52.316, 0.901), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions); setMarkers(map, lodge); } var lodge = [ ['Lodges', 52.316, 0.901], ['Other', 52, 1], ]; function setMarkers(map, locations) { var image = { url: 'http://s20.postimg.org/kq92v5uqh/homepin.png', size: new google.maps.Size(32, 45), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(16, 45) }; var shadow = { url: 'http://s20.postimg.org/65s00bzrt/homepin_shadow.png', size: new google.maps.Size(36, 23), origin: new google.maps.Point(0,0), anchor: new google.maps.Point(4, 23) }; var shape = { coord: [16, 0, 0, 16, 16, 45, 32 , 16], type: 'poly' }; for (var i = 0; i &lt; locations.length; i++) { var lodge = locations[i]; var myLatLng = new google.maps.LatLng(lodge[1], lodge[2]); var marker = new google.maps.Marker({ position: myLatLng, map: map, shadow: shadow, icon: image, shape: shape, title: lodge[0], zIndex: lodge[3] }); } } google.maps.event.addDomListener(window, 'load', initialize); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload