WebSite X5Help Center

 
Hakan S.
Hakan S.
User

Multiple Map Point in a Google Maps, and a special icon  en

Autor: Hakan S.
Visitado 2699, Followers 3, Compartido 0  

Hi,

How can i add the multiple map pin into a Google Maps?

Forexpamle; i have 20 (known lat and long ) different map point and i want to put them with the special icon.

You can see the following example

Publicado en
8 RESPUESTAS - 1 ÚTIL
Esahc ..
Esahc ..
Moderator

Hakan, I suspect this is a payed-for service offered by google.

You could however "dummy one up" by taking a screen print of a map and placing your icons. You can then set a link to the live google map. If you are a bit enthusiastic, you could create an image map so that each icon selected goes directly to that address on the live google map.

Leer más
Publicado en de Esahc ..
Rbbrt WebsiteX5.info
Rbbrt WebsiteX5.info
User

Hi Hakan,

Showing pins on a map, with one or more custom images isn't a payed service. I use this in my own Filemaker app.

However, this will take some Javascript programming.  If you are up to this you can find the API-documentation, tutorials and lots of  examples at Google's siteh at

https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/" target="_blank" rel="nofollow">https://developers.google.com/maps/documentation/javascript/">https://developers.google.com/maps/documentation/javascript/https://developers.google.com/maps/documentation/javascript/.

Use the HTML-object to place the map on the screen and the page's advanced properties to define the api-key in the header.

Succes,

Robert

Leer más
Publicado en de Rbbrt WebsiteX5.info
John S.
John S.
User

Hello Rbbrt

Your link gives a 404

Leer más
Publicado en de John S.
Rbbrt WebsiteX5.info
Rbbrt WebsiteX5.info
User

Hi Hakan, 

I've copied the code from my app in a WebsiteX5 project, so I can demo it to you. See http://websitex5.info/google-maps.html (but don't judge the site, this is my personal 'play ground' cool )

Put the following code before the </head> tag in the page properties (Advanced tab)

// start header part

<style type="text/css">
html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
</style>

<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIz----this is your google maps api-key---VG0">
</script>

// End header part

Now put a HTML-object on the page where you want it and copy/paste the following code snippet, but for the image(s you have to define your own images and upload them to your webserver and you have to replace the locations with your own locations. Give the html object an appropriate height...

// Copy from here

<script type="text/javascript">
var map=null;
var imgSize = new google.maps.Size(24, 24);
var imgOrigin = new google.maps.Point(0,0);
var imgAnchor = new google.maps.Point(12,24);

// Define the image(s) you use on the map
var imgView = {url: 'https://www.schotlandopmaat.nl/nl/mapicons/viewpoint.png',size: imgSize, origin: imgOrigin, anchor: imgAnchor };
var imgGolf = {url: 'https://www.schotlandopmaat.nl/nl/mapicons/golf.png' size: imgSize, origin: imgOrigin, anchor: imgAnchor };
var imgVissen= {url: 'https://www.schotlandopmaat.nl/nl/mapicons/vissen.png' size: imgSize, origin: imgOrigin, anchor: imgAnchor };


// Define an array with the locations you want to show on the map
var locations = [
    ["frandy fishery", 56.22323055,-3.69988801,imgVissen],
    ["Roxburghe Golf", 55.55853871,-2.46941121,imgGolf],
    ["Culloden Battle Field", 57.47789362,-4.09548569,imgView],
    ["Mylne's Court", 55.94924490,-3.19431715,imgView],
    ["Brodie's Close", 55.94920541,-3.19309276,imgView]
];

// The initialization function for showing the locations on the map

function initialize() {


// Define the center of the map on initial show and the initial zoom level
    var myLatlng = new google.maps.LatLng(57.46799632,-4.2218578);
    var mapOptions = { zoom: 8, center: myLatlng };

// Now show the map
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var infowindow=new google.maps.InfoWindow ( {maxWidth: 400 });

// loop through the array of locations and place a marker on the map.
    for (var i = 0; i < locations.length; i++) {
        var location = locations[i];

        if (location[1] != "") {
            var myLatLng = new google.maps.LatLng(location[1], location[2]);


            var marker = new google.maps.Marker({
                position: myLatLng,
                map: map,
                icon: location [3],
                title: location[0]
            });

// show the info of the marker when clicked on.
            google.maps.event.addListener(marker, 'click', (function(marker, i) {
                 return function() {
                 infowindow.setContent(locations[i][0]);
                 infowindow.open(map, marker);
            }
            })(marker, i));
        }
    }
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

<div id="map-canvas"></div>

// To here

This should do the trick!

Succes!

Robert

Leer más
Publicado en de Rbbrt WebsiteX5.info