Jump to content
Kezza7

Adding multiple markers to Google maps

Recommended Posts

I have been using W3 CSS references to help set up a web page and it works perfectly until I try to play with it. As soon as I try to add the extra marker it doesn't show up on the web page, but there is no indication that the script is in error.

I want to add two markers to the one map so that the Church and the Presbytery are both displayed. The lat and long for the church are (-27.557692, 151.932294). The lat and lng for the presbytery are: (lat:-27.557458,lng:151.932975)

This is the existing code. Can someone tell me what I have to do to make two markers appear? Thanks

<!-- Google Maps -->
<div id="googleMap" style="width:100%;height:420px;"></div>
<script>
function myMap()

{
  myCenter=new google.maps.LatLng(-27.557692, 151.932294);
  var mapOptions= {
    center:myCenter,
    zoom:14, scrollwheel: false, draggable: false,
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  var map=new google.maps.Map(document.getElementById("googleMap"),mapOptions);

  var marker = new google.maps.Marker({
    position: myCenter,
  });
  marker.setMap(map);

}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCSg2YnESq0U3ncI0oZ8A_9SQSc1Sd4Edo&callback=myMap"></script>
<!--
To use this code on your website, get a free API key from Google.

Share this post


Link to post
Share on other sites

You basically reproduce the last few lines with new lat/lng

        function myMap()

        {
            myCenter = new google.maps.LatLng(-27.557692, 151.932294);
            var mapOptions = {
                center: myCenter,
                zoom: 14, scrollwheel: false, draggable: false,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(document.getElementById("googleMap"), mapOptions);

            var marker = new google.maps.Marker({
                position: myCenter,
                title: "The Church",
            });
            marker.setMap(map);

            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(-27.557458, 151.932975),
                title: "The Presbytery"

            });
            marker.setMap(map);
        }

If you have a lot of these new locations, you can add them to an array and just loop through them.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...