CODEWITHSUNDEEP
javascripthtmlgoogle-mapsjsfiddle
myh_stack
myh_stack

Reputation: 35

Google Map Click on link/tab to change marker location map

Is that possible to click on the other Tab 2 and the marker/location change? Click back on Tab 1 marker/location change back to first location.

[Links to Fiddle] http://jsfiddle.net/ye3x8/

function initialize() {

    var styles = [{
        stylers: [{
            saturation: -100
        }]
    }];

    var styledMap = new google.maps.StyledMapType(styles, {
        name: "Styled Map"
    });

    var mapProp = {
        center: new google.maps.LatLng(3.165659, 101.611416),
        zoom: 17,
        panControl: false,
        zoomControl: false,
        mapTypeControl: false,
        scaleControl: true,
        streetViewControl: false,
        overviewMapControl: false,
        rotateControl: true,
        scrollwheel: false,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    var map = new google.maps.Map(document.getElementById("map_canvas"), mapProp);

    map.mapTypes.set('map_style', styledMap);
    map.setMapTypeId('map_style')

    var marker = new google.maps.Marker({
        position: new google.maps.LatLng(3.167244, 101.612950),
        animation: google.maps.Animation.DROP,
        icon: 'https://cdn1.iconfinder.com/data/icons/Map-Markers-Icons-Demo-PNG/48/Map-Marker-Marker-Outside-Pink.png',
    });

    marker.setMap(map);

    google.maps.event.addListener(marker, "click", function () {

    });
}

google.maps.event.addDomListener(window, 'load', initialize);

Upvotes: 1

Views: 4696

Answers (2)

Vaughn
Vaughn

Reputation: 166

A marker can be added to your map like so:

var myLatlng = new google.maps.LatLng(lat, lon)

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!'
});

The marker position can then be changed like so:

marker.setPosition(new google.maps.LatLng(lat, lon));

In order to change the position of your maker based on which tab a user selects, you could do something like:

var myLatlng = new google.maps.LatLng(lat, lon)

var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title: 'Hello World!'
});

//When user clicks tab1:
changeMarkerPos(marker, tab1lat, tab1lon);

//When user clicks tab1:
changeMarkerPos(marker, tab2lat, tab2lon);

function changeMarkerPos(marker, lat, lon){
    marker.setPosition(new google.maps.LatLng(lat, lon));
}

Upvotes: 4

user2267379
user2267379

Reputation: 1127

Create 2 markers and add 2 functions like :

<script>
function recenter() {
    map.setCenter(new google.maps.LatLng(<?php echo $coord[0].",".$coord[1];?>));
    map.setZoom(16);
    }

function recenter2() {
    map.setCenter(new google.maps.LatLng(<?php echo $coord2[0].",".$coord2[1];?>));
    map.setZoom(16);
    }
</script>

$coord[0] and $coord[1] are latitude and longitude of first marker $coord2[0] and $coord2[1] are latitude and longitude of second marker

don't forget to add onclick function on your tabs :

onclick="recenter();"

onclick="recenter2();"

Upvotes: 0

Related Questions